angular度改变延迟
我有一个input，它可以在变化时过滤一个ng-repeat列表。 重复包含大量的数据，并需要几秒钟来过滤所有内容。 我希望他们在开始过滤之前有0.5秒的延迟。 什么是造成这种延迟的正确方法？
input
<input ng-model="xyz" ng-change="FilterByName()" /> 重复
<div ng-repeat"foo in bar"> <p>{{foo.bar}}</p> </div>
过滤function
$scope.FilterByName = function () { //Filtering Stuff Here });
谢谢
AngularJS 1.3+
由于AngularJS 1.3，您可以利用ngModelOptions属性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>
JS：
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); }; } ]);
– 要么 –
检查小提琴
在AngularJS 1.3之前
您将不得不使用$超时来添加延迟，并可能使用$ 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); } });
您可以使用$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); } });
Plnkr
我知道这个问题太旧了。 但仍然想提供一个更快的方式来实现这个使用debouncing 。
所以代码可以写成
<input ng-model="xyz" ng-change="FilterByName()" ng-model-options="{debounce: 500}"/>
去抖动将以毫秒为单位。
或者你可以在angular-ui中使用指令'typeahead-wait-ms =“1000”'
<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">
