Javascript AngularJS-仅在ng更改时触发$timeout事件一次

我对html中绑定到范围变量的输入字段进行了ng更改

<input type="text" ng-model="test" ng-change="change()" required>

var change = function(){ redraw_graph()}

var change=function（）{redraw_graph（）}

现在，当我更改输入框时，它会为我编写的每个新字符重新绘制图形。我希望有一个延迟（N秒），因此angular将在用户完成键入之前等待ng change事件触发。如果触发了多个ng更改事件，它将取消较早的事件，并仅执行最新的事件

---

我已经将延迟与超时合并在一起，但是在N秒之后，ng change事件仍然会触发多次。我以前解决过这个问题，但我现在不知道怎么做。

根据@Blackhole的建议，你可以通过取消原来的$timeout来解决这个问题

以下是您将如何做到这一点：

var timer;

$scope.change = function(){
   $timeout.cancel( timer );

   timer = $timeout(function() {
             redraw_graph()
           },2000);
 }

检查下面的plunker，看看它是如何工作的。完成输入字段上的所有更改后2秒，将弹出一个警报框（仅一个）。也就是说，如果在2秒钟之前更改输入字段，则弹出窗口将再延迟2秒钟

编辑

---

虽然上面是一种实现方法，但AngularJS已经在v1.3+中为这一特定功能提供了自己的实现。可以使用。

您可以查看下划线JS，它有

.debounce（）

和

.throttle（）

在我看来，您所要求的似乎已经内置在AngularJS中。所以，若您使用该指令，您可以使用

debounce

属性：

ng model options=“{debounce:1000}”

引用文档

..“/或去抖动延迟，以便只进行实际更新 当计时器过期时，此计时器将在另一次更改后重置 发生了。”

工作样本 角度模块（'optionsExample'，[]） .controller（'ExampleController'，['$scope'，'， 职能（$范围）{ $scope.user={ 姓名：“说” }; } ]);

示例-示例ngModelOptions指令去盎司生产
姓名：
清楚的


user.name=

在调用新的

$timeout

之前，取消现有的

$timeout

。

debounce

已经包含在angular的

ng模型选项中

不需要下划线（即使它是一个很酷的库）Total同意Rohan，下划线做了很多很酷的事情，但是对于angularJs的这个用例来说是完全没有必要的，它有

ng模型选项

，可以为您处理这些东西，而不是让您的控制器/服务更加臃肿！使用这种方法，如果我正确阅读代码，您总是会得到最新的值。当您只需要最新的值时，这非常酷，相反，它可以将其与

ng model options

的去盎司值进行比较，如果这适用于您的用例，那么这是一个有效的选项。虽然，正如我所记得的，

ng model options

也有一个延迟选项为您执行此操作！