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