Не может показаться, что Google сделал пример того, как это делается.
Я успешно создал текстовое поле, которое вызывает функцию каждый раз, когда она изменяется. То, что я хотел бы сделать, это вызвать функцию только тогда, когда пользователь прекратил печатать за миллисекунды.
Я знаю, как это сделать в JQuery, используя событие keyup, и, вероятно, может заставить его работать таким образом, но вы хотите сделать это "путь Angular".
Edit
Возможно, это было не ясно из тега или текста, но я использую AngularJS и хочу использовать правильную методологию для этой структуры для создания этой функции задержки.
Для подхода angular можно ввести $timeout в контроллер как зависимость и использовать $watch для переменной области, которую вы назначили в ng-model.
var timer=false;
$scope.ModelName='foo';
$scope.$watch('ModelName', function(){
if(timer){
$timeout.cancel(timer)
}
timer= $timeout(function(){
/* run code*/
},delay)
});
Для этого существует ng-model-options
<input id="delayedModel" ng-model="delayedModel" ng-change="callDelayed()" ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }" />
метод callDelayed вызывает только 500 мс после ввода последнего char или размытия
Вот документация https://docs.angularjs.org/api/ng/directive/ngModelOptions
Хотя @charlietfl предоставил полностью приемлемый ответ, я хотел бы поделиться с вами другим подходом без использования метода $watch:
Шаблон:
<input id="delayedModel" ng-model="delayedModel" ng-change="callDelayed()"/>
Контроллер:
(function (timer, delay) {
$scope.callDelayed= function () {
if(timer){
$timeout.cancel(timer)
}
timer = $timeout(function(){
/* run code*/
}, delay)
};
})(false, 500);
Может быть, стоит указать, почему используется самопроизвольная анонимная функция. Основная причина заключается в том, чтобы не загрязнять область контроллера с помощью переменных time и delay. В этом случае они определяются в области локальных функций.
[ОБНОВЛЕНИЕ]
Я также нашел интересный проект AngularJS под названием angular-debounce, что делает его очень простым для достижения такого же эффекта. Используя директиву debounce, можно развернуть обновление модели следующим образом:
<input type="text" ng-model="delayedModel" debounce="500"></input>