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