Penundaan ng-perubahan sudut

Saya memiliki masukan yang memfilter daftar ng-pengulangan pada perubahan. Pengulangan berisi banyak data dan membutuhkan beberapa detik untuk menyaring semuanya. Saya ingin penundaan mereka menjadi 0,5 detik sebelum saya memulai proses penyaringan. Bagaimana cara sudut yang benar untuk membuat penundaan ini?

Memasukkan

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

Ulang

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

Fungsi Filter

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

Terima kasih

AngularJS 1.3+

Sejak AngularJS 1.3 Anda dapat memanfaatkan debounceproperti yang ngModelOptionsdisediakan untuk mencapai itu dengan sangat mudah tanpa menggunakan $timeoutsama sekali. Berikut contohnya:

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);
        };
    }
]);

-- ATAU --

Periksa Biola

Sebelum AngularJS 1.3

Anda harus menggunakan $ timeout untuk menambahkan penundaan dan mungkin dengan penggunaan $ timeout.cancel (previoustimeout) Anda dapat membatalkan batas waktu sebelumnya dan menjalankan yang baru (membantu mencegah pemfilteran dijalankan beberapa kali secara berurutan dalam jarak waktu)

Berikut ini contohnya:

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);
    }
});

Anda dapat menggunakan $timeoutuntuk menambahkan penundaan dan mungkin dengan penggunaan $timeout.cancel(previoustimeout)Anda dapat membatalkan waktu tunggu sebelumnya dan menjalankan yang baru (membantu mencegah pemfilteran dijalankan beberapa kali secara berurutan dalam interval waktu)

Contoh:-

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

Saya tahu pertanyaan itu terlalu tua. Namun tetap ingin menyediakan satu cara yang lebih cepat untuk mencapai hal ini dengan menggunakan debouncing .

Jadi kodenya bisa ditulis sebagai

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

Debounce akan mengambil angka dalam milidetik.

atau Anda dapat menggunakan perintah 'typeahead-wait-ms = "1000"' dari 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">