聚合物：延迟值改变执行

Question

得到包含一个简单的聚合物模板：

<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

您可以使用聚合物提供的debounce来组合多个事件侦听器。

debounce（jobName，callback，[wait]）。调用去抖动将 命名任务的多个请求合并成一个调用，在没有新请求的情况下等待时间结束后 。如果没有给出等待时间 ，则回调将在微任务定时调用（在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); 
}