एंगुलरजेएस - केवल एक बार

पर एनजी-चेंज पर फायर $ टाइमआउट ईवेंट मेरे पास एचटीएमएल में इनपुट फ़ील्ड पर एनजी-चेंज है जो एक स्कोप वैरिएबल से जुड़ा हुआ है।एंगुलरजेएस - केवल एक बार

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

var change = function(){ redraw_graph()}

अब जब मैं इनपुट बॉक्स बदलता हूं, तो यह मेरे द्वारा लिखे गए प्रत्येक नए चरित्र के लिए ग्राफ को दोहराता है। मैं देरी (एन सेकेंड) चाहता हूं, इसलिए एनजी-चेंज इवेंट आग से पहले उपयोगकर्ता टाइपिंग करने से पहले कोणीय इंतजार करेगा। और यदि कई एनजी-चेंज इवेंट निकाल दिए गए हैं, तो यह पहले के लोगों को रद्द कर देता है और केवल नवीनतम को निष्पादित करता है।

मैंने टाइमआउट के साथ देरी को शामिल किया है, लेकिन एन सेकंड के बाद एनजी-चेंज इवेंट अभी भी एक से अधिक बार आग लगती है। मैंने पहले इस समस्या को हल कर लिया है, लेकिन मैं यह नहीं समझ सकता कि वर्तमान में इसे कैसे किया जाए।

स्रोत

2014-10-09 Michael

रद्द मौजूदा '$ timeout' एक नया लागू करने से पहले। – Blackhole

@ ब्लैकहोल के सुझाव के आधार पर, आप अपना मूल $ टाइमआउट रद्द करके इसे बाहर कर सकते हैं।

यहाँ कैसे आप यह कर देगी:

var timer; 

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

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

plunker नीचे चेक यह कैसे काम करता है देखने के लिए। इनपुट क्षेत्र पर आपके सभी परिवर्तनों के साथ किए जाने के बाद एक अलर्ट बॉक्स (केवल एक) 2 सेकंड पॉपअप करेगा। यही है, यदि आप 2 सेकंड से पहले इनपुट फ़ील्ड बदलते हैं, तो आप पॉपअप को 2 सेकंड तक देरी करते हैं।

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

संपादित
जबकि ऊपर यह कर में से एक विधि है, AngularJS v1.3 + में इस विशेष सुविधा के लिए अपने स्वयं के कार्यान्वयन के साथ आ गया है। ngModelOptions का उपयोग किया जा सकता है।

स्रोत

2014-10-09 19:55:29 Angad

आप संभवतः UnderscoreJS की जाँच कर सकता है, जो .debounce() और .throttle()

स्रोत

2014-10-09 20:02:37

'debounce' पहले से ही कोणीय के' एनजी-मॉडल-विकल्प 'में अंडरस्कोर की आवश्यकता नहीं है (भले ही यह एक अच्छी लाइब्रेरी है) –

है मेरे लिए यह आप के लिए पहले से ही AngularJS में बनाया गया है जो चाह रहे हैं की तरह लगता है। इस प्रकार, यदि आप ngModelOptions निर्देश का उपयोग कर आप debounce संपत्ति का उपयोग कर सकते हैं:

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

डॉक्स

के शब्दों में .. "/ या ताकि एक debouncing देरी जब कोई टाइमर समाप्त हो जाता है तो वास्तविक अपडेट केवल होता है; यह टाइमर होने पर एक और परिवर्तन के बाद रीसेट हो जाएगा। "

कार्य नमूना

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>

स्रोत

2014-10-09 20:25:14

एंगुलरजेएस - केवल एक बार

उत्तर

संबंधित मुद्दे