Chức năng gọi với độ trễ Khi thay đổi hộp văn bản trong AngularJS

Question

Có vẻ như không phải là một ví dụ về cách thực hiện điều này.

Tôi đã tạo thành công một hộp văn bản gọi một hàm mỗi lần thay đổi. Những gì tôi muốn làm là chỉ gọi hàm khi người dùng đã ngừng nhập cho x mili giây.

Tôi biết cách thực hiện nó trong JQuery bằng cách sử dụng sự kiện keyup, và có thể làm cho nó hoạt động theo cách này, nhưng muốn làm điều đó "the Angular Way".

Sửa

Có lẽ nó không phải là rõ ràng từ thẻ hoặc văn bản, nhưng tôi đang sử dụng AngularJS, và muốn sử dụng phương pháp chính xác cho khung đó để tạo chức năng chậm trễ này.

Answer 1

Cách tiếp cận góc có thể tiêm $timeout trong bộ điều khiển dưới dạng phụ thuộc và sử dụng $watch trên biến phạm vi bạn đã gán trong ng-model.

var timer=false; 
$scope.ModelName='foo'; 
$scope.$watch('ModelName', function(){ 
    if(timer){ 
     $timeout.cancel(timer) 
    } 
    timer= $timeout(function(){ 
     /* run code*/ 
    },delay) 
}); 

Answer 2

Trong khi @charlietfl cung cấp câu trả lời hoàn toàn chấp nhận được tôi muốn chia sẻ với bạn phương pháp khác mà không cần sử dụng phương pháp $watch:

mẫu:

<input id="delayedModel" ng-model="delayedModel" ng-change="callDelayed()"/> 

Bộ điều khiển:

(function (timer, delay) { 
     $scope.callDelayed= function() { 
      if(timer){ 
       $timeout.cancel(timer) 
      } 
      timer = $timeout(function(){ 

       /* run code*/ 

      }, delay) 
     }; 
    })(false, 500); 

Có thể cần phải chỉ ra lý do tại sao chức năng ẩn danh tự thực hiện được sử dụng. Lý do chính là không gây ô nhiễm phạm vi điều khiển với các biến số time và delay. Trong trường hợp này, chúng được định nghĩa trong phạm vi hàm cục bộ.

[UPDATE]

Tôi cũng đã tìm thấy một AngularJS dự án thú vị được gọi là angular-debounce mà làm cho nó thực sự dễ dàng để đạt được cùng hiệu quả. Sử dụng debounce chỉ nó có thể dealy cập nhật mô hình như thế này:

<input type="text" ng-model="delayedModel" debounce="500"></input> 

Answer 3

Có ng-model-options cho cách này

<input id="delayedModel" ng-model="delayedModel" ng-change="callDelayed()" ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }" /> 

phương pháp callDelayed chỉ gọi sau 500 ms từ gõ char cuối cùng hoặc trên mờ

Đây là tài liệu https://docs.angularjs.org/api/ng/directive/ngModelOptions