Mic*_*ael 6 javascript timeout angularjs
我在html中的输入字段上有一个ng-change,它绑定到一个范围变量.
<input type="text" ng-model="test" ng-change="change()" required>
var change = function(){ redraw_graph()}
现在当我更改输入框时,它会为我写的每个新字符重绘图形.我希望有一个延迟(N秒),因此在ng-change事件触发之前,在用户完成输入之前,angular将等待.如果触发了多个ng-change事件,它将取消之前的事件并仅执行最新事件.
我已将延迟纳入超时,但在N秒之后,ng-change事件仍然会触发多次.我之前已经解决了这个问题,但我现在无法弄清楚如何做到这一点.
对我来说,似乎你要求的内容已经内置于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 。