AngularJS-只对ng更改触发$timeout事件一次

AngularJS - Fire $timeout event on ng-change only once

本文关键字：事件 一次 timeout ng 只对 AngularJS-      更新时间：2023-09-26

我对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()

相关文章：