AngularJS - Fire $ timeout sự kiện trên ng-thay đổi chỉ một lần

Tôi có một ng-thay đổi trên một lĩnh vực đầu vào trong html đó là ràng buộc với một biến phạm vi.

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

var change = function(){ redraw_graph()}

Bây giờ khi tôi thay đổi hộp nhập, nó vẽ lại biểu đồ cho mỗi ký tự mới tôi viết. Tôi muốn có một sự chậm trễ (N giây), do đó, góc cạnh sẽ chờ đợi trước khi người dùng được thực hiện gõ trước khi sự kiện ng-thay đổi cháy. Và nếu có nhiều sự kiện ng-thay đổi được kích hoạt, nó sẽ hủy bỏ những sự kiện trước đó và chỉ thực hiện những cái mới nhất.

Tôi đã kết hợp sự chậm trễ với thời gian chờ, nhưng sau N giây, sự kiện ng-thay đổi vẫn cháy nhiều lần. Tôi đã giải quyết vấn đề này trước đây, nhưng tôi không thể tìm ra cách để làm điều đó hiện tại.

Nguồn

2014-10-09 Michael

Hủy '$ timeout' hiện có trước khi gọi một cái mới. – Blackhole

Dựa trên đề xuất của @ Blackhole, bạn có thể làm việc này bằng cách hủy $ timeout ban đầu của mình.

Đây là cách bạn sẽ làm điều đó:

var timer; 

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

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

Kiểm tra dưới đây plunker để xem cách nó hoạt động. Một hộp cảnh báo (chỉ một hộp) sẽ bật lên 2 giây sau khi bạn hoàn thành tất cả thay đổi của mình trên trường nhập. Tức là, nếu bạn thay đổi trường nhập trước 2 giây, bạn sẽ trì hoãn việc bật lên thêm 2 giây nữa.

http://plnkr.co/edit/v08RYwCDVtymNrgs48QZ?p=preview

EDIT
Trong khi ở trên là một trong những phương pháp làm việc đó, AngularJS đã đưa ra thực hiện riêng cho tính năng đặc biệt này trong v1.3 +. ngModelOptions có thể được sử dụng.

Nguồn

2014-10-09 19:55:29 Angad

Bạn có thể có thể kiểm tra UnderscoreJS, trong đó có .debounce() và .throttle()

Nguồn

2014-10-09 20:02:37

'debounce' đã được bao gồm trong' ng-model-options 'của angular không cần gạch dưới (mặc dù nó là một thư viện tuyệt vời) –

Đối với tôi nó có vẻ như những gì bạn đang xin đã được xây dựng vào AngularJS. Vì vậy, nếu bạn tận dụng các chỉ thị các ngModelOptions bạn có thể sử dụng debounce tài sản:

ng-model-options="{ debounce: 1000 }"

Để trích dẫn các tài liệu

.. "/ hoặc một sự chậm trễ debouncing sao cho cập nhật thực tế chỉ diễn ra khi bộ hẹn giờ hết hạn; bộ hẹn giờ này sẽ được đặt lại sau khi thay đổi khác diễn ra. "

mẫu Làm việc

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>

Nguồn

2014-10-09 20:25:14

AngularJS - Fire $ timeout sự kiện trên ng-thay đổi chỉ một lần

Trả lời

Các vấn đề liên quan