聚合物：延遲值改變執行

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