我对html中绑定到范围变量的输入字段进行了ng更改。
<input type="text" ng-model="test" ng-change="change()" required>
var change = function(){ redraw_graph()}
现在,当我更改输入框时,它会为我写入的每个新字符重新绘制图形。我希望有一个延迟(N秒),这样angular将在用户完成键入之前等待ng更改事件触发。如果触发了多个ng更改事件,它会取消较早的事件,只执行最新的事件。
我已经将延迟与超时结合在一起,但在N秒后,ng更改事件仍然会触发不止一次。我以前解决过这个问题,但现在不知道怎么做。
对我来说,你想要的似乎已经内置在AngularJS中了。所以,若使用ngModelOptions指令,就可以使用debounce
属性:
ng-model-options="{ debounce: 1000 }"
引用文档
"/或去抖动延迟,以便只进行实际更新当定时器到期时;此计时器将在另一次更改后重置发生。"
工作样本
angular.module('optionsExample', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.user = {
name: 'say'
};
}
]);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ngModelOptions-directive-debounce-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
<form name="userForm">
Name:
<input type="text"
name="userName"
ng-model="user.name"
ng-model-options="{ debounce: 1000 }" />
<button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button>
<br />
</form>
<pre>user.name = <span ng-bind="user.name"></span></pre>
</div>
</body>
</html>
根据@Blackhole的建议,您可以通过取消原来的$timeout来解决这个问题。
以下是您的操作方法:
var timer;
$scope.change = function(){
$timeout.cancel( timer );
timer = $timeout(function() {
redraw_graph()
},2000);
}
查看下面的plunker,看看它是如何工作的。在您完成输入字段上的所有更改后2秒,将弹出一个警告框(仅一个)。也就是说,如果您在2秒之前更改输入字段,则会将弹出窗口再延迟2秒。
http://plnkr.co/edit/v08RYwCDVtymNrgs48QZ?p=preview
编辑
虽然上面是一种实现方法,但AngularJS已经在v1.3+中为这个特定功能提出了自己的实现。可以使用ngModelOptions。
您可以查看UndercoreJS,它有.debounce()
和.throttle()