AngularJS - ng-change上的Fire $ timeout事件只发生一次

Question

我在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事件仍然会多次触发。 我之前已经解决了这个问题，但我现在无法弄清楚如何做到这一点。

Answer 1

对我来说，似乎你要求的内容已经内置于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>

Answer 2

根据@ 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 。

Answer 3

你可能会看看.debounce() ，它有.debounce()和.throttle()

AngularJS - ng-change上的Fire $ timeout事件只发生一次

问题描述

3 个解决方案

解决方案1
8 2014-10-09 20:25:14

解决方案2
2 2014-10-09 19:55:29

解决方案3
0 2014-10-09 20:02:37

AngularJS - ng-change上的Fire $ timeout事件只发生一次

问题描述

3 个解决方案

解决方案1 8 2014-10-09 20:25:14

解决方案2 2 2014-10-09 19:55:29

解决方案3 0 2014-10-09 20:02:37

解决方案1
8 2014-10-09 20:25:14

解决方案2
2 2014-10-09 19:55:29

解决方案3
0 2014-10-09 20:02:37