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 }"

引用文档

..＆＃34; /或去抖动延迟，以便仅进行实际更新当计时器到期时;此计时器将在另一次更改后重置发生了。＆＃34;

工作样本

＆＃13;

  angular.module('optionsExample', [])
    .controller('ExampleController', ['$scope',
      function($scope) {
        $scope.user = {
          name: 'say'
        };
      }
  ]);

＆＃13;

<!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>

＆＃13;

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

你可以看看UnderscoreJS，它有.debounce()和.throttle()

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

3 个答案: