कोणीय एनजी-परिवर्तन देरी

Question

मेरे पास एक इनपुट है जो बदलाव पर एनजी-रिपीट सूची को फ़िल्टर करता है। रिपीट में बहुत सारा डेटा होता है और हर चीज को फिल्टर करने में कुछ सेकंड लगते हैं। मैं फ़िल्टरिंग प्रक्रिया शुरू करने से पहले उनकी 0.5 सेकंड की देरी करना चाहूंगा। इस देरी को बनाने के लिए कोणीय में सही तरीका क्या है?

इनपुट

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

दोहराना

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

फ़िल्टर फ़ंक्शन

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

धन्यवाद

Comments

बस $timeout500ms के लिए उपयोग करें । $scope.FilterByName = function () { $timeout(_filterByName , 500)

— PSL

@PSL फंक्शन में कहां? मैं केवल यह चाहता हूं कि खोज एक बार निष्पादित हो। अगर मैं इसकी भरपाई करता हूं, तो यह सिर्फ एक बड़ा विलंब पैदा करेगा और कई खोज करेगा।

— MGot90

हाँ, अपने समारोह में। prev टिप्पणी में एक स्निपेट है। आप उपयोग कर सकते हैं $timeout.cancel(timeoutpromise)यदि एक टाइमआउट प्रगति पर है और एक और परिवर्तन शुरू हो जाता है।

— PSL

plnkr.co/edit/CSsr3r?p=preview

— PSL

@PSL धन्यवाद एक आकर्षण की तरह काम करता है!

— MGot90

Answer 1

AngularJS 1.3+

AngularJS 1.3 के बाद से आप उस debounceसंपत्ति का उपयोग कर सकते हैं ngModelOptionsजो बिल्कुल आसान उपयोग किए बिना प्राप्त करने के लिए प्रदान करता है $timeout। यहाँ एक उदाहरण है:

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>

जे एस:

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

- या

फिडल को चेक करें

AngularJS से पहले 1.3

आपको देरी जोड़ने के लिए $ timeout का उपयोग करना होगा और शायद $ timeout.cancel (previoustimeout) के उपयोग के साथ आप किसी भी पिछले समय को रद्द कर सकते हैं और नए को चला सकते हैं (फ़िल्टरिंग को रोकने के लिए कई बार कंसोल से निष्पादित होने में मदद करता है) समय अंतराल)

यहाँ एक उदाहरण है:

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

Comments

ध्यान दें कि ng-model-optionsकेवल कोणीय v1.3 में जोड़ा गया था (और बीटा 8 में डेबिट संपत्ति )। जिन लोगों को अभी भी एंगुलर के पुराने संस्करण का उपयोग करने की आवश्यकता है, उन्हें अन्य समाधानों का सहारा लेना होगा, जैसे कि पीएसएल से एक, या एनजी-डेब्यू जैसे बाहरी मॉड्यूल का उपयोग करके ।

— विन्सेन्ट सेल्स

एक नकारात्मक पक्ष यह हो सकता है कि इससे एनजी-पैटर्न जैसी मान्यताओं में देरी होती है।

— जोहान बैज

Answer 2

आप $timeoutएक देरी जोड़ने के लिए उपयोग $timeout.cancel(previoustimeout)कर सकते हैं और शायद आप के उपयोग के साथ किसी भी पिछले समय को रद्द कर सकते हैं और नया चला सकते हैं (फ़िल्टरिंग को रोकने के लिए एक समय अंतराल के भीतर कई बार जानबूझकर निष्पादित करने में मदद करता है)

उदाहरण:-

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

Comments

डाउनवॉटर और भविष्य के आगंतुकों के लिए: यह उत्तर कोणीय 1.2.x के लिए जोड़ा गया था , और संभवत: 1.3.x से पहले जोड़ा गया था, जिसमें एनजी-मॉडल-विकल्पों के साथ डेबिट विकल्प है और बेहतर से पहले उत्तर को संशोधित करने का कभी मौका नहीं मिला। @rckd से उत्तर आया (लगभग 3 महीने बाद यह एक)।

— PSL

हालांकि मैं कोणीय js 1.4 का उपयोग कर रहा हूं, फिर भी मैं $ टाइमआउट समाधान को उपयोगी ng-changeपाता हूं, जब मैं मॉडल पर बहस नहीं करना चाहता।

— SStanley

Answer 3

मुझे पता है कि सवाल बहुत पुराना है। लेकिन फिर भी डिबगिंग का उपयोग करके इसे प्राप्त करने के लिए एक तेज तरीका प्रदान करना चाहते हैं ।

तो कोड के रूप में लिखा जा सकता है

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

डिविज़न मिलिसकंड में संख्या ले जाएगा।

Answer 4

या आप कोणीय-यूआई से निर्देशात्मक 'टाइप-हेड-वेट-एमएस = "1000" का उपयोग कर सकते हैं

<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">