কৌণিক এনজি-পরিবর্তন দেরি

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)

— পিএসএল

@ পিএসএল ফাংশন কোথায়? আমি চাই কেবল একবার অনুসন্ধান চালানো হোক। আমি যদি কেবল এটি অফসেট করি তবে এটি কেবল আরও বড় বিলম্ব তৈরি করবে এবং একাধিক অনুসন্ধান করবে।

— MGot90

হ্যাঁ, আপনার ফাংশনে পূর্ব মন্তব্য একটি স্নিপেট আছে। $timeout.cancel(timeoutpromise)যদি একটি টাইমআউট প্রক্রিয়াধীন হয় এবং অন্য একটি পরিবর্তন ট্রিগার হয়ে যায় আপনি ব্যবহার করতে পারেন ।

— PSL

plnkr.co/edit/CSsr3r?p= পূর্বরূপ

— পিএসএল

@ পিএসএল ধন্যবাদ আপনাকে একটি মোহন মত কাজ করে!

— MGot90

Answer 1

AngularJS 1.3+

যেহেতু AngularJS 1.3 আপনি debounceসম্পত্তিটি কিছুটা ব্যবহার ngModelOptionsনা করেই খুব সহজ অর্জনের জন্য ব্যবহার করতে পারেন $timeout। এখানে একটি উদাহরণ:

এইচটিএমএল:

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

- বা -

ঝাঁকুনি পরীক্ষা করুন

অ্যাঙ্গুলারজেএস এর আগে 1.3

আপনাকে একটি বিলম্ব যোগ করতে $ টাইমআউট ব্যবহার করতে হবে এবং সম্ভবত $ টাইমআউট.ক্যানসেল (পূর্ববর্তী সময়) এর সাহায্যে আপনি আগের কোনও টাইমআউট বাতিল করতে পারেন এবং নতুনটি চালাতে পারেন (ফিল্টারিংকে একের মধ্যে একাধিকবার নিরবিচ্ছিন্নভাবে কার্যকর করতে রোধ করতে সহায়তা করে) বিরতি)

এখানে একটি উদাহরণ:

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 (এবং মধ্যে debounce সম্পত্তি beta.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 প্রকাশের আগে যোগ করা হয়েছিল যা এনজি-মডেল-বিকল্পগুলির সাথে ডাবঞ্চ অপশন রয়েছে এবং এর আগে উত্তরের আগে উত্তরটি সংশোধন করার সুযোগ পায়নি @ আরসিডিডি থেকে উত্তর এসেছে (এটির প্রায় 3 মাস পরে)

— পিএসএল

যদিও আমি কৌনিক জেএস ১.৪ ব্যবহার করছি তখনও ng-changeআমি মডেলটি ডাবনো করতে না চাইলে $ সময়সীমা সমাধান কার্যকর বলে মনে করি।

— এসএসটানলে 22'16

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