Độ trễ ng thay đổi góc

Question

Tôi có đầu vào lọc danh sách ng lặp lại khi thay đổi. Lặp lại chứa rất nhiều dữ liệu và mất vài giây để lọc qua mọi thứ. Tôi muốn bị chậm trễ 0,5 giây trước khi tôi bắt đầu quá trình lọc. Cách chính xác trong góc để tạo sự chậm trễ này là gì?

Input

<input ng-model="xyz" ng-change="FilterByName()" /> 

Lặp lại

<div ng-repeat"foo in bar"> 
     <p>{{foo.bar}}</p> 
</div> 

Lọc Chức năng

$scope.FilterByName = function() { 
     //Filtering Stuff Here 
}); 

Cảm ơn

Answer 1

Một gularJS 1.3+

Kể từ AngularJS 1.3 bạn có thể sử dụng các tài sản debouncengModelOptions cung cấp để đạt được điều đó rất dễ dàng mà không cần sử dụng $timeout ở tất cả. Dưới đây là một ví dụ:

HTML:

<div ng-app='app' ng-controller='Ctrl'> 
    <input type='text' placeholder='Type a name..' 
     ng-model='vm.name' 
     ng-model-options='{ debounce: 1000 }' 
     ng-change='vm.greet()' 
    /> 

    <p ng-bind='vm.greeting'></p> 
</div> 

JS:

angular.module('app', []) 
.controller('Ctrl', [ 
    '$scope', 
    '$log', 
    function($scope, $log){ 
     var vm = $scope.vm = {}; 

     vm.name = ''; 
     vm.greeting = ''; 
     vm.greet = function greet(){ 
      vm.greeting = vm.name ? 'Hey, ' + vm.name + '!' : ''; 
      $log.info(vm.greeting); 
     }; 
    } 
]); 

- HOẶC -

Check the Fiddle

Trước AngularJS 1.3

Bạn sẽ phải sử dụng $ timeout để thêm thời gian chờ và có thể với việc sử dụng $ timeout.cancel (previoustimeout), bạn có thể hủy bất kỳ thời gian chờ trước nào và chạy chương trình mới (giúp ngăn việc lọc được thực hiện nhiều lần consecutovely trong một khoảng thời gian)

Dưới đây là một ví dụ:

app.controller('MainCtrl', function($scope, $timeout) { 
    var _timeout; 

    //... 
    //... 

    $scope.FilterByName = function() { 
     if(_timeout) { // if there is already a timeout in process cancel it 
      $timeout.cancel(_timeout); 
     } 
     _timeout = $timeout(function() { 
      console.log('filtering'); 
      _timeout = null; 
     }, 500); 
    } 
}); 

Answer 2

Bạn có thể sử dụng $timeout để thêm một sự chậm trễ và có lẽ với việc sử dụng $timeout.cancel(previoustimeout) bạn có thể hủy bỏ bất kỳ thời gian chờ trước và chạy cái mới (giúp ngăn ngừa quá trình lọc được thực hiện nhiều lần consecutovely trong một khoảng thời gian)

Ví dụ: -

app.controller('MainCtrl', function($scope, $timeout) { 
    var _timeout; 

//... 
//... 

    $scope.FilterByName = function() { 
    if(_timeout){ //if there is already a timeout in process cancel it 
     $timeout.cancel(_timeout); 
    } 
    _timeout = $timeout(function(){ 
     console.log('filtering'); 
     _timeout = null; 
    },500); 
    } 
}); 

Plnkr

Answer 3

tôi biết câu hỏi là quá già. Nhưng vẫn muốn cung cấp một cách nhanh hơn để đạt được điều này bằng cách sử dụng debouncing.

Vì vậy, các mã có thể được viết như

<input ng-model="xyz" ng-change="FilterByName()" ng-model-options="{debounce: 500}"/> 

debounce sẽ mất số trong mili giây.

Answer 4

hoặc bạn có thể sử dụng chỉ thị 'typeahead-chờ-ms = "1000"' từ angular-ui

<input 
    typeahead="name for name in filterWasChanged()" 
    typeahead-wait-ms="1000" 
    type="text" placeholder="search" 
    class="form-control" style="text-align: right" 
    ng-model="templates.model.filters.name">