एंगुलरजेएस इनपुट थ्रॉटलिंग विथ डेब्यू

इनपुट के थ्रॉटलिंग का उपयोग करने के लिए विभिन्न परिदृश्य हैं ताकि फ़िल्टर को हर बार मूल्य के बदले जाने पर पुनर्गणना नहीं किया जाएगा, लेकिन कम बार। एक अधिक उपयुक्त शब्द "पराजय" है, क्योंकि सार में आप फ़ंक्शन को कॉल करने से पहले कुछ स्थिर स्तर पर मूल्य को स्थिर करने की उम्मीद करते हैं ताकि सर्वर के लिए निरंतर अनुरोधों के "उछाल" का कारण न हो। इस तरह का एक विहित मामला तत्वों की सूची को फ़िल्टर करने के लिए इनपुट फ़ील्ड में पाठ दर्ज करने वाला उपयोगकर्ता है। यदि आपके फ़िल्टर के तर्क में कुछ ओवरहेड शामिल है (उदाहरण के लिए, फ़िल्टर एक REST संसाधन के माध्यम से होता है जो बैकएंड डेटाबेस पर एक क्वेरी निष्पादित करता है), तो आप निश्चित रूप से उपयोगकर्ता को फ़ील्ड में पाठ लिखते समय सभी बार क्वेरी परिणामों को पुनरारंभ और पुनः लोड नहीं करना चाहते हैं। यह खत्म होने तक इंतजार करने के बजाय अधिक सही होगा, और उसके बाद अनुरोध को एक बार निष्पादित करें।

इस समस्या का एक सरल समाधान यहाँ है: jsfiddle.net/nZdgm

मान लें कि आपके पास एक सूची ($ गुंजाइश.लिस्ट) है जिसे आप एक फ़िल्टर की गई सूची ($ गुंजाइश.filteredList) के रूप में प्रकाशित करते हैं, जो $ गुंजाइश.searchText फ़ील्ड के पाठ वाले कुछ पर आधारित है। आपका फ़ॉर्म कुछ इस तरह दिखाई देगा (अभी के लिए थ्रॉटल चेकबॉक्स पर ध्यान न दें):

<div data-ng-app='App'> <div data-ng-controller="MyCtrl"> <form> <label for="searchText">Search Text:</label> <input data-ng-model="searchText" name="searchText" /> <input type="checkbox" data-ng-model="throttle"> Throttle <label>You typed:</label> <span>{{searchText}}</span> </form> <ul><li data-ng-repeat="item in filteredList">{{item}}</li></ul> </div> </div> 

एक विशिष्ट परिदृश्य खोज क्षेत्र का निरीक्षण करना और तुरंत प्रतिक्रिया करना है। निस्पंदन विधि:

 var filterAction = function($scope) { if (_.isEmpty($scope.searchText)) { $scope.filteredList = $scope.list; return; } var searchText = $scope.searchText.toLowerCase(); $scope.filteredList = _.filter($scope.list, function(item) { return item.indexOf(searchText) !== -1; }); }; 

नियंत्रक $ घड़ी को निम्नानुसार सेट करता है:

 $scope.$watch('searchText', function(){filterAction($scope);}); 

यह दृष्टिकोण हर बार जब आप किसी फ़ील्ड में टाइप करते हैं तो फ़िल्टरिंग को ट्रिगर करेगा। स्थिति को मापने के लिए, हम अंडरस्कोर फ़ंक्शन को अंडरस्कोर .js में निर्मित करते हैं। फ़ंक्शन बहुत सरल है: इसे निष्पादित करने के लिए फ़ंक्शन और मिलीसेकंड में समय दें। यह वास्तविक फ़ंक्शन कॉल को विलंबित करेगा जब तक कि निर्दिष्ट समय इसे कॉल करने के अंतिम प्रयास के बाद से न हो। दूसरे शब्दों में, 1 सेकंड की देरी के साथ (जो मैं इस उदाहरण में उपयोग करता हूं प्रभाव को अतिरंजित करने के लिए) और क्षेत्र में त्वरित पाठ इनपुट के दौरान फ़ंक्शन कॉल की एक सतत स्ट्रीम, वास्तविक फ़ंक्शन तब तक नहीं बुलाया जाएगा जब तक कि मैं अभी से लिखना बंद नहीं करता हूं 1 सेकेंड पास नहीं होगा।

आप इस तरह एक सरल बहस करने के लिए परीक्षा हो सकती है:

 var filterThrottled = _.debounce(filterAction, 1000); $scope.$watch('searchText', function(){filterThrottled($scope);}); 

हालाँकि, एक समस्या है। यह दृष्टिकोण एक टाइमर का उपयोग करता है जो $ पचाने के चक्र के बाहर आग लगाता है , इसलिए यह अंततः UI को प्रभावित नहीं करेगा, क्योंकि कोणीय को हुए परिवर्तनों के बारे में नहीं पता है। इसके बजाय, आपको कॉल को $ लागू में लपेटना चाहिए:

 var filterDelayed = function($scope) { $scope.$apply(function(){filterAction($scope);}); }; 

उसके बाद, आप इनपुट बंद होते ही $ घड़ी और प्रतिक्रिया सेट कर सकते हैं:

 var filterThrottled = _.debounce(filterDelayed, 1000); $scope.$watch('searchText', function(){filterThrottled($scope);}); 

बेशक, यहां एक पूर्ण उदाहरण में थ्रॉटलिंग शामिल होना चाहिए, ताकि आप "तत्काल" फ़िल्टरिंग और आस्थगित के बीच अंतर देख सकें। मामले के लिए फिडेल यहां पाया जा सकता है: jsfiddle.net/nZdgm