javascript - Polymer:延迟值改变执行

Question

得到一个简单的 polymer 模板，其中包含:

<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 毫秒后进行搜索。

Answer 1

您可以使用polymer提供的debounce来对多个事件监听器进行分组。

debounce(jobName, callback, [wait]). Call debounce to collapse multiple requests for a named task into one invocation, which is made after the wait time has elapsed with no new request. If no wait time is given, the callback is called at microtask timing (guaranteed to be before paint).

您可以阅读更多相关信息 https://www.polymer-project.org/1.0/docs/devguide/utility-functions.html

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

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);
}