полимер: значение задержки изменилось исполнение

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]). Вызов debounce, чтобы свернуть несколько запросов для именованной задачи в один вызов, который сделан после истечения времени ожидания без нового запроса. Если нет времени ожидания , обратный вызов вызывается в момент микротаски (гарантированно будет перед краской).

Вы можете прочитать больше об этом 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); 
}