角度 n 变化延迟

我有一个输入，它过滤了一个 ng- 重复的变化列表。重复包含大量数据，需要几秒钟过滤所有内容。我希望他们是0.5秒之前，我开始过滤过程延迟。什么是正确的方式在角度，以创造这种延迟？

输入

 <input ng-model="xyz" ng-change="FilterByName()" />

重复

 <div ng-repeat"foo in bar">
<p>{{foo.bar}}</p>
</div>

过滤功能

 $scope.FilterByName = function () {
//Filtering Stuff Here
});

Thanks

78173 次浏览
小开

您可以使用 $timeout来添加延迟，也许通过使用 $timeout.cancel(previoustimeout)，您可以取消任何以前的超时并运行新的超时(有助于防止在一个时间间隔内连续多次执行过滤)

例子:-

app.controller('MainCtrl', function($scope, $timeout) {
var _timeout;


//...
//...


$scope.FilterByName = function () {
if(_timeout){ //if there is already a timeout in process cancel it
$timeout.cancel(_timeout);
}
_timeout = $timeout(function(){
console.log('filtering');
_timeout = null;
},500);
}
});

普林克

小开
最佳答案

AngularJS 1.3 +

由于 AngularJS 1.3，您可以利用 debounce的属性 ngModelOptions提供，以实现这一点非常容易，而不使用 $timeout在所有。这里有一个例子:

HTML:

<div ng-app='app' ng-controller='Ctrl'>
<input type='text' placeholder='Type a name..'
ng-model='vm.name'
ng-model-options='{ debounce: 1000 }'
ng-change='vm.greet()'
/>


<p ng-bind='vm.greeting'></p>
</div>

约翰逊:

angular.module('app', [])
.controller('Ctrl', [
'$scope',
'$log',
function($scope, $log){
var vm = $scope.vm = {};


vm.name = '';
vm.greeting = '';
vm.greet = function greet(){
vm.greeting = vm.name ? 'Hey, ' + vm.name + '!' : '';
$log.info(vm.greeting);
};
}
]);

或者

检查小提琴

Before AngularJS 1.3

您必须使用 $timeout 添加一个延迟，并且可能使用 $timeout.Cancel (previoustimeout)您可以取消以前的任何超时并运行新的超时(有助于防止在一个时间间隔内连续多次执行过滤)

这里有一个例子:

app.controller('MainCtrl', function($scope, $timeout) {
var _timeout;


//...
//...


$scope.FilterByName = function() {
if(_timeout) { // if there is already a timeout in process cancel it
$timeout.cancel(_timeout);
}
_timeout = $timeout(function() {
console.log('filtering');
_timeout = null;
}, 500);
}
});
小开

我知道这个问题太老了。但是仍然想提供一个更快的方法来实现这个使用 跳舞。

所以代码可以写成

<input ng-model="xyz" ng-change="FilterByName()" ng-model-options="{debounce: 500}"/>

Debounce will take the number in milliseconds.

小开

or you can use directive ' typeahead-wait-ms="1000" ' from 角度

<input
typeahead="name for name in filterWasChanged()"
typeahead-wait-ms="1000"
type="text" placeholder="search"
class="form-control" style="text-align: right"
ng-model="templates.model.filters.name">

提交答案