聚合物:更改延迟值执行

问题描述

有一个简单的Polymer模板，其中包含:

Got a simple Polymer template containing:

<paper-input floatingLabel label="Suche" value="{{search}}" error-message="Invalid input!"></paper-input>

和JS:

properties : {
    search : {
        type : String,
        notify : true,
        observer : 'searchChanged'
    }
},
searchChanged : function() {
    this.$.searchAjax.url = /search/" + this.search;
    this.$.searchAjax.generateRequest();
}

因此，每次值更改时，都会使用新的URL查询服务器.效果很好，但我想将对服务器的请求延迟大约500毫秒，以便在用户每次输入但停止输入500毫秒后不搜索.

So everytime the value changes the server is queried with a new URL. This works good but I want to delay the request to the server for about 500ms to not search after every input the user makes but after he stopped typing for 500ms.

推荐答案

您可以使用Polymer提供的debounce对多个事件侦听器进行分组.

You can use debounce provided by polymer to group multiple event listeners.

您可以 https://www了解更多信息. polymer-project.org/1.0/docs/devguide/utility-functions.html

根据您的情况，以下修改应有效:

In your case, below modification should work:

properties : {
    search : {
        type : String,
        notify : true,
        observer : 'searchChanged'
    }
},
_getData: function() {
  this.$.searchAjax.url = '/search/' + this.search;
  this.$.searchAjax.generateRequest();
},
searchChanged : function() {
  this.debounce('getDataDebouce', this._getData, 500);
}

这篇关于聚合物:更改延迟值执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！