ব্যবহারকারী টাইপ করা বন্ধ না করা পর্যন্ত কীভাবে .keyup () হ্যান্ডলারটি বিলম্ব করবেন?

Question

আমি একটি অনুসন্ধান ক্ষেত্র পেয়েছি। এই মুহুর্তে এটি প্রতিটি কী-আপ অনুসন্ধান করে। সুতরাং কেউ যদি "উইন্ডোজ" টাইপ করেন তবে এটি প্রতিটি কী-আপের জন্য এজেএক্সের সাথে অনুসন্ধান করবে: "ডাব্লু", "ওয়াই", "উইন", "উইন্ড", "উইন্ডো", "উইন্ডো", "উইন্ডোজ"।

আমি বিলম্ব করতে চাই, সুতরাং এটি তখন অনুসন্ধান করে যখন ব্যবহারকারী 200 এমএসের জন্য টাইপ করা বন্ধ করে দেয়।

keyupফাংশনে setTimeoutএটির জন্য কোনও বিকল্প নেই , এবং আমি চেষ্টা করেছি , তবে এটি কার্যকর হয়নি।

আমি এটা কিভাবে করবো?

Comments

সদৃশ stackoverflow.com/questions/1620602/...

— Roatin Marth

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

— a432511

প্রদত্ত ও গৃহীত উত্তরগুলি যতক্ষণ পর্যন্ত সঠিক থাকে ততক্ষণ সদৃশ থাকাতে আমি ক্ষতি দেখতে ব্যর্থ হয়েছি fail প্রশ্নের ডাটাবেসের সাথে যুক্ত করা অবশ্যই কিছু ভাল এবং কিছু করার চেষ্টা করতে হবে।

— ম্যাটিস

ক্ষতি হ'ল ভবিষ্যতে লোকেরা একই প্রশ্নের ১০০ জন থাকলে উজ্জ্বল জবাব প্রত্যেকে ভাগ করে নিতে সক্ষম হবেনা, সুতরাং ডুপস বন্ধ করে এবং প্রত্যেককে মূল প্রশ্নে পুনর্নির্দেশ করা সর্বোত্তম অনুশীলন এবং সংশোধনগুলি সন্ধান করার জন্য ভাল। দেখুন stackoverflow.com/help/duplicates কেন সদৃশ বন্ধ করা হয় আরো তথ্যের জন্য।

— rncrtr

অনুমানযোগ্য এটির চেয়ে এটি বেশ জনপ্রিয়। এটি আরও ভাল শব্দযুক্ত, এর আরও ভাল উত্তর রয়েছে, গুগল ইত্যাদিতে উচ্চতর স্থান রয়েছে So তাই অনেকে এই উত্তরটি থেকে উপকৃত হয়েছেন। পূর্ববর্তী ক্ষেত্রে, এটি বন্ধ করা থাকলে লজ্জা হত। কিছু তুচ্ছ জিনিস রয়েছে যা সদৃশ হিসাবে খারাপ, কিন্তু এটি সেই বিভাগে আসে না।

— ব্যবহারকারী

Answer 1

আমি একই উদ্দেশ্যে এই ছোট ফাংশনটি ব্যবহার করি, ব্যবহারকারী নির্দিষ্ট সময়ের জন্য বা উচ্চ হারে আগুনের ইভেন্টগুলিতে টাইপ করা বন্ধ করে দেওয়ার পরে কোনও ফাংশন সম্পাদন করে resize:

function delay(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}


// Example usage:

$('#input').keyup(delay(function (e) {
  console.log('Time elapsed!', this.value);
}, 500));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="input">Try it:
<input id="input" type="text" placeholder="Type something here..."/>
</label>

কিভাবে এটা কাজ করে:

delayফাংশন একটি আবৃত ফাংশন যা অভ্যন্তরীণভাবে একজন ব্যক্তি টাইমার পরিচালনা, প্রতিটি ফাঁসি টাইমার প্রদত্ত সময় বিলম্ব পুনরায় আরম্ভ করা হয় ফিরে আসবে, যদি একাধিক মৃত্যুদণ্ড কার্যকর ঘটতে আগে এই সময় পাস, টাইমার শুধু রিসেট করুন এবং আবার শুরু হবে।

টাইমার অবশেষে শেষ হয়ে গেলে, কলব্যাক ফাংশনটি সম্পাদিত হয়, মূল প্রসঙ্গ এবং আর্গুমেন্টগুলি (এই উদাহরণস্বরূপ, jQuery এর ইভেন্ট অবজেক্ট এবং DOM উপাদান হিসাবে this) পাস করে ।

আপডেট 2019-05-16

আমি আধুনিক পরিবেশের জন্য ES5 এবং ES6 বৈশিষ্ট্যগুলি ব্যবহার করে ফাংশনটি পুনরায় প্রয়োগ করেছি:

function delay(fn, ms) {
  let timer = 0
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(fn.bind(this, ...args), ms || 0)
  }
}

বাস্তবায়ন পরীক্ষার একটি সেট দিয়ে আচ্ছাদিত করা হয় ।

আরও কিছু পরিশীলিত জিনিসের জন্য, jQuery টাইপওয়াচ প্লাগইনটি একবার দেখুন।

Comments

অন্য বিকল্প: github.com/bgrins/bindWithDelay/blob/master/bindWithDelay.js । এটি আপনি যেভাবে বর্ণনা করেছেন ঠিক তেমনভাবে কাজ করে, আমি কেবলমাত্র সেই প্যাটার্নটি নিজেকে ব্যবহার করে দেখতে পেলাম সিনট্যাক্সকে আরও সহজ করার জন্য এটি একটি jQuery প্লাগইন হিসাবে প্রয়োগ করেছে। এখানে একটি ডেমো পৃষ্ঠা রয়েছে: ব্রিইংআরিনস্টিটিড

— ব্রায়ান গ্রিনস্টেড

আমি প্রথমে টাইপ করা চিঠির পরিমাণকে হার্ডকোড করেছি, এই পদ্ধতিটি গুড়ের মতো মসৃণ (সালফার ছাড়াই)

— হার

আমি যখন এটি একটি $। পোষ্ট () দিয়ে ব্যবহার করি এটি একই সাথে টাইপ করা সমস্ত কিছু প্রেরণ করে, তবে এটি আমার কী-আপ হিসাবে যতবার পাঠায় তা পাঠিয়ে দেয়। সময়সীমা শেষ হয়ে গেলে কি কেবল পাঠানোর কোনও উপায় আছে?

— ntgCleaner

আমি যদি দুটি বা আরও বেশি ফাংশন কল করি যা স্বতন্ত্র বিলম্বের প্রয়োজন হয় তবে এটি কার্যকর হয় না। আমি এই সমাধানটি পরিবর্তে স্ট্যাকওভারফ্লো.com

— মিগুয়েল

আমি শীর্ষ মন্তব্যে লিঙ্কযুক্ত 'bindWithDelay' প্লাগইনটি সুপারিশ করি। কিন্তু আমি আপনাকে পরামর্শ দিচ্ছি @ এই প্রশ্নের (নীচে - এতে Hazerider এর উত্তর stackoverflow.com/a/19259625/368896 ), যা এই উত্তরটি বেশী ভালো এবং সহজ পিছনে ধারণা বুঝতে অধ্যয়নরত মূল্য, বাক্পটুতাপূর্ণ বিভিন্ন উপাদানের জন্য বিভিন্ন টাইমার করার অনুমতি বাঁধাই - উপরের প্লাগইন কোডে একই নীতি ব্যবহৃত হয়েছে, তবে বুঝতে সহজ।

— ড্যান নিসেনবাউম

Answer 2

আপনি যদি টাইপটি শেষ হয়ে যাওয়ার পরে অনুসন্ধান করতে চান তবে আপনার setTimoutকল থেকে ফিরে আসা টাইমআউটটি ধরে রাখতে গ্লোবাল ভেরিয়েবল ব্যবহার করুন এবং এটি clearTimeoutএখনও সুখী না হলে এটি বাতিল করুন যাতে এটি শেষ keyupইভেন্ট ব্যতীত সময়সীমাকে আটকায় না won't

var globalTimeout = null;  
$('#id').keyup(function(){
  if(globalTimeout != null) clearTimeout(globalTimeout);  
  globalTimeout =setTimeout(SearchFunc,200);  
}   
function SearchFunc(){  
  globalTimeout = null;  
  //ajax code
}

বা একটি বেনামে ফাংশন সহ:

var globalTimeout = null;  
$('#id').keyup(function() {
  if (globalTimeout != null) {
    clearTimeout(globalTimeout);
  }
  globalTimeout = setTimeout(function() {
    globalTimeout = null;  

    //ajax code

  }, 200);  
}   

Answer 3

সিএমএসের উত্তরে আর একটি সামান্য বর্ধন। পৃথক বিলম্বের জন্য সহজেই অনুমতি দেওয়ার জন্য, আপনি নিম্নলিখিতগুলি ব্যবহার করতে পারেন:

function makeDelay(ms) {
    var timer = 0;
    return function(callback){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
};

আপনি যদি একই বিলম্ব পুনরায় ব্যবহার করতে চান তবে ঠিক করুন

var delay = makeDelay(250);
$(selector1).on('keyup', function() {delay(someCallback);});
$(selector2).on('keyup', function() {delay(someCallback);});

আপনি যদি পৃথক বিলম্ব চান, আপনি করতে পারেন

$(selector1).on('keyup', function() {makeDelay(250)(someCallback);});
$(selector2).on('keyup', function() {makeDelay(250)(someCallback);});

Comments

আকর্ষণীয় যে আমি এই মন্তব্যটি লেখার দিন পর্যন্ত 600০০ টিরও বেশি upvotes সহ সমাধানটি কেবলমাত্র 2 টি upvotes (আমার সহ) সহ এই উত্তরটির মতো উত্তম নয়। স্পষ্টতই উচ্চতর, কারণ এটি একাধিক উইজেটকে সমর্থন করে যা বিলম্ব করতে পারে বা ভাগ করতে পারে না। দুর্দান্ত উত্তর।

— ড্যান নিসেনবাউম

... যদিও উত্তরের নীচে মন্তব্যে jQuery প্লাগইন পৃথক উপাদানগুলির জন্য পৃথক টাইমারগুলি পরিচালনা করে, এবং থ্রটল এবং ইভেন্ট যুক্তিও যুক্ত করে: github.com/bgrins/bindWithDelay/blob/master/bindWithDelay.js। এই প্লাগইনটির সাধারণ পদ্ধতিটি আপনার কোডের সমান, সুতরাং আরও পরিশীলিত প্লাগইনটি বোঝার চেষ্টা করার আগে আপনার কোডটি এর সরলতার জন্য এটি বোঝার জন্য মনোযোগ সহকারে অধ্যয়ন করার উপযুক্ত। আমি সেই প্লাগইনটি প্রস্তাব দিই, যদিও - তবে যদি আপনার থ্রোটল বা ইভেন্টের ডেটা পাস করার প্রয়োজন না হয় তবে আপনার কোডটি দুর্দান্ত! দুটি ভাল বিকল্প। ধন্যবাদ!

— ড্যান নিসেনবাউম

হুম, এটি আমার জন্য দেরি করে কিন্তু someApiCallতবুও একাধিকবার ট্রিগার করে - এখন কেবল ইনপুট ক্ষেত্রের চূড়ান্ত মান দিয়ে।

— রোল্যান্ট

Answer 4

আপনি আন্ডারস্কোর.জেএস এও দেখতে পারেন , যা ডেবিউয়ের মতো ইউটিলিটি পদ্ধতি সরবরাহ করে :

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

Comments

একইটি লড্যাশ - লডাশ.

— আদর্শ মাদ্রেচা

Answer 5

সিএমএসের উত্তরের ভিত্তিতে আমি এটি তৈরি করেছি:

JQuery অন্তর্ভুক্ত করার পরে নীচের কোডটি রাখুন:

/*
 * delayKeyup
 * http://code.azerti.net/javascript/jquery/delaykeyup.htm
 * Inspired by CMS in this post : http://stackoverflow.com/questions/1909441/jquery-keyup-delay
 * Written by Gaten
 * Exemple : $("#input").delayKeyup(function(){ alert("5 secondes passed from the last event keyup."); }, 5000);
 */
(function ($) {
    $.fn.delayKeyup = function(callback, ms){
        var timer = 0;
        $(this).keyup(function(){                   
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        });
        return $(this);
    };
})(jQuery);

এবং সহজভাবে এটি ব্যবহার করুন:

$('#input').delayKeyup(function(){ alert("5 secondes passed from the last event keyup."); }, 5000);

যত্নশীল: পরামিতি হিসাবে ফাংশনটিতে $ (এই) পরিবর্তনশীল ইনপুটটির সাথে মেলে না

Answer 6

লেবেলগুলি ব্যবহার করে বিলম্ব করুন মাল্টি ফাংশন

এই সমাধানটি আমি নিয়ে কাজ করি। এটা কোনো ফাংশন আপনি চান তার উপর সঞ্চালনের বিলম্বিত হবে । এটি কীডাউন অনুসন্ধান কোয়েরি হতে পারে, সম্ভবত পূর্ববর্তী বা পরবর্তী বোতামগুলিতে দ্রুত ক্লিক (এটি অন্যথায় যদি একটানা ক্লিক করা হয় তবে একাধিক অনুরোধ প্রেরণ করা হবে, এবং সর্বোপরি ব্যবহার করা হবে না)। এটি এমন একটি গ্লোবাল অবজেক্ট ব্যবহার করে যা প্রতিটি সম্পাদনের সময় সংরক্ষণ করে এবং এটি সর্বাধিক বর্তমান অনুরোধের সাথে তুলনা করে।

সুতরাং ফলাফলটি হ'ল কেবলমাত্র সর্বশেষ ক্লিক / ক্রিয়াকলাপটি আসলেই ডাকা হবে, কারণ সেই অনুরোধগুলি একটি সারিতে সঞ্চিত থাকে, যে একই মিলের সাথে আর কোনও অনুরোধ উপস্থিত না থাকলে X মিলিসেকেন্ড কল করার পরে!

function delay_method(label,callback,time){
    if(typeof window.delayed_methods=="undefined"){window.delayed_methods={};}  
    delayed_methods[label]=Date.now();
    var t=delayed_methods[label];
    setTimeout(function(){ if(delayed_methods[label]!=t){return;}else{  delayed_methods[label]=""; callback();}}, time||500);
  }

আপনি নিজের বিলম্বের সময়টি সেট করতে পারেন (এটি optionচ্ছিক, 500 মিমি ডিফল্ট)। এবং আপনার ফাংশন আর্গুমেন্টগুলি "ক্লোজার ফ্যাশনে" প্রেরণ করুন।

উদাহরণস্বরূপ, যদি আপনি বেলো ফাংশনটি কল করতে চান:

function send_ajax(id){console.log(id);}

একাধিক সেন্ড_এজ্যাক্স অনুরোধ রোধ করতে আপনি এগুলি ব্যবহার করে বিলম্ব করুন :

delay_method( "check date", function(){ send_ajax(2); } ,600);

"অনুরোধের তারিখ" লেবেলটি ব্যবহার করে এমন প্রতিটি অনুরোধ কেবল তখনই ট্রিগার করা হবে যদি mil০০ মিলিসেকেন্ড সময়সীমার মধ্যে অন্য কোনও অনুরোধ না করা হয়। এই যুক্তি alচ্ছিক

লেবেল স্বাধীনতা (একই লক্ষ্য ফাংশন কলিং) কিন্তু উভয় চালান:

delay_method("check date parallel", function(){send_ajax(2);});
delay_method("check date", function(){send_ajax(2);});

একই ফাংশনটিতে কল করার ফলাফল রয়েছে তবে তাদের লেবেল আলাদা থাকার কারণে তাদের স্বাধীনভাবে বিলম্ব করুন

Comments

আমি যে প্রকল্পে কাজ করছি তাতে আপনার কোডটি ব্যবহার করছি এবং এতে সমস্যা হচ্ছে। এটি আসলে কিছুতেই বিলম্ব করে না। ভেবেছিলেন আপনি সহায়তা দেখতে / সরবরাহ করতে চাইতে পারেন। stackoverflow.com/questions/51393779/...

— KDJ

Answer 7

যদি কেউ একই ফাংশনটি বিলম্ব করতে চান, এবং বাহ্যিক চলক ছাড়াই তিনি পরবর্তী স্ক্রিপ্টটি ব্যবহার করতে পারেন:

function MyFunction() {

    //Delaying the function execute
    if (this.timer) {
        window.clearTimeout(this.timer);
    }
    this.timer = window.setTimeout(function() {

        //Execute the function code here...

    }, 500);
}

Comments

গ্রেট! সহজ সমাধান যা কাজ করে!

— 18:58

আমার এটা ভাল লেগেছে. একেবারে পুনঃব্যবহারযোগ্য নয় তবে বোঝা সহজ।

— ভিনসেন্ট

Answer 8

কোনও সাধারণ ক্ষেত্রে কোনও পাঠ্য ক্ষেত্রে টাইপ করা শেষ করার পরে কোনও ফাংশন চালানোর জন্য ডিজাইন করা দুর্দান্ত সহজ পদ্ধতির ...

<script type="text/javascript">
$(document).ready(function(e) {
    var timeout;
    var delay = 2000;   // 2 seconds

    $('.text-input').keyup(function(e) {
        console.log("User started typing!");
        if(timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(function() {
            myFunction();
        }, delay);
    });

    function myFunction() {
        console.log("Executing function for user!");
    }
});
</script>

<textarea name="text-input" class="text-input"></textarea>

Comments

ধন্যবাদ! উপরের জনপ্রিয় উত্তরগুলি কাজ করে না ... তবে আপনার পরামর্শটি পুরোপুরি কার্যকর হয়েছিল।

— ব্যবহারকারী 2662680

2020 এখনও কাজ করে

— রোমেল ইন্ডেমনে

Answer 9

এই উপাদানটি উপাদানটি ফিরে পেতে গ্যাটেনের উত্তর থেকে ফাংশনটি কিছুটা বাড়িয়েছে:

$.fn.delayKeyup = function(callback, ms){
    var timer = 0;
    var el = $(this);
    $(this).keyup(function(){                   
    clearTimeout (timer);
    timer = setTimeout(function(){
        callback(el)
        }, ms);
    });
    return $(this);
};

$('#input').delayKeyup(function(el){
    //alert(el.val());
    // Here I need the input element (value for ajax call) for further process
},1000);

http://jsfiddle.net/Us9bu/2/

Answer 10

এটি আমার জন্য কাজ করেছিল যেখানে আমি অনুসন্ধান যুক্তিযুক্ত অপারেশনটি বিলম্ব করি এবং পাঠ্যের ক্ষেত্রে মানটি প্রবেশ করানো একই হয় কিনা তা পরীক্ষা করে দেখি। যদি মান একই হয় তবে আমি এগিয়ে গিয়ে অনুসন্ধান মান সম্পর্কিত ডেটার জন্য ক্রিয়াকলাপটি সম্পাদন করব।

$('#searchText').on('keyup',function () {
    var searchValue = $(this).val();
    setTimeout(function(){
        if(searchValue == $('#searchText').val() && searchValue != null && searchValue != "") {
           // logic to fetch data based on searchValue
        }
        else if(searchValue == ''){
           // logic to load all the data
        }
    },300);
});

Comments

আশানুরূপভাবে কাজ করে না - ফেচগুলির সংখ্যা একই, মাত্র 300 মিমি দ্বারা বিলম্বিত - আপনাকে সেট টাইমআউট () সম্পাদনের আগে প্রতিটি কিস্ট্রোকের ক্লিয়ারটাইমআউট () ফাংশনটি ব্যবহার করতে হবে

— পিকার্ড

ভাল, এই ক্ষেত্রে আপনার ক্লিয়ারটাইমআউট ব্যবহার করার দরকার নেই। কন্ডিশন সার্চভ্যালু == $ ('# অনুসন্ধানটেক্সট')। ভাল () সেটটাইমআউটের অভ্যন্তরে মানটি 300 মিলিয়ন আগের মতো একই কিনা তা নিশ্চিত করবে। যদি এটি বোঝা যায় তবে আমাকে জানান। ধন্যবাদ।

— সাগর গালা

Answer 11

আমি আশ্চর্য হয়েছি যে সিএমএসের খুব সুন্দর টুকরো টুকরো টুকরো টুকরো করে একাধিক ইনপুট নিয়ে সমস্যাটি কেউ উল্লেখ করেনি।

মূলত, প্রতিটি ইনপুটের জন্য আপনাকে স্বতন্ত্রভাবে বিলম্বের পরিবর্তনশীলটি সংজ্ঞায়িত করতে হবে। অন্যথায় যদি এস বি প্রথম পাঠ্যকে পাঠ্য রাখে এবং দ্রুত অন্য ইনপুটটিতে ঝাঁপিয়ে পড়ে এবং টাইপ করা শুরু করে, প্রথমটির জন্য কলব্যাক কল করা হবে না !

অন্যান্য উত্তরের উপর ভিত্তি করে আমি নীচের কোডটি দেখতে পেয়েছি:

(function($) {
    /**
     * KeyUp with delay event setup
     * 
     * @link http://stackoverflow.com/questions/1909441/jquery-keyup-delay#answer-12581187
     * @param function callback
     * @param int ms
     */
    $.fn.delayKeyup = function(callback, ms){
            $(this).keyup(function( event ){
                var srcEl = event.currentTarget;
                if( srcEl.delayTimer )
                    clearTimeout (srcEl.delayTimer );
                srcEl.delayTimer = setTimeout(function(){ callback( $(srcEl) ); }, ms);
            });

        return $(this);
    };
})(jQuery);

এই সমাধানটি ইনপুটটির বিলম্বকালীন টাইমার ভেরিয়েবলের মধ্যে সেটটাইমআউট রেফারেন্স রাখে। এটি ফ্যাজিক্সের পরামর্শ অনুসারে কলব্যাকের উপাদানগুলির রেফারেন্সও পাস করে।

আই 6, 8 (কমপ্লেক্স - 7), 8 এবং অপেরা 12.11 তে পরীক্ষিত।

Comments

এটি চেষ্টা করেছেন কিন্তু প্রথম কীআপে সঠিকভাবে কাজ করতে পারেন না।

— লার্স থোর্ন

Answer 12

প্রতিটি কীআপে কল করতে বিলম্ব ফাংশন। jQuery 1.7.1 বা তার বেশি প্রয়োজন

jQuery.fn.keyupDelay = function( cb, delay ){
  if(delay == null){
    delay = 400;
  }
  var timer = 0;
  return $(this).on('keyup',function(){
    clearTimeout(timer);
    timer = setTimeout( cb , delay );
  });
}

ব্যবহার: $('#searchBox').keyupDelay( cb );

Answer 13

সিএমএসের উত্তরকে কেন্দ্র করে এখানে নতুন বিলম্ব পদ্ধতি যা এর ব্যবহারে 'এটি' সংরক্ষণ করে:

var delay = (function(){
  var timer = 0;
  return function(callback, ms, that){
    clearTimeout (timer);
    timer = setTimeout(callback.bind(that), ms);
  };
})();

ব্যবহার:

$('input').keyup(function() {
    delay(function(){
      alert('Time elapsed!');
    }, 1000, this);
});

Answer 14

ব্যবহার

mytimeout = setTimeout( expression, timeout );

যেখানে এক্সপ্রেশনটি চালানোর স্ক্রিপ্ট এবং টাইমআউটটি চালানোর আগে মিলি সেকেন্ডে অপেক্ষা করার সময় - এটি স্ক্রিপ্টটিকে আপত্তিজনকভাবে দেখায় না, তবে সময়সীমাটি সম্পন্ন না হওয়া পর্যন্ত কেবল সেই অংশটি কার্যকর করতে বিলম্ব করে।

clearTimeout(mytimeout);

সময়সীমা পুনরায় সেট / সাফ করবে যাতে এটি স্ক্রিপ্টটি এক্সপ্রেশন হিসাবে চালায় না (বাতিল হিসাবে) যতক্ষণ না এটি এখনও কার্যকর করা হয়নি।

Answer 15

এটি সিএমএসের লাইন ধরে একটি সমাধান, তবে আমার জন্য কয়েকটি মূল সমস্যা সমাধান করে:

• একাধিক ইনপুট সমর্থন করে, বিলম্ব একই সাথে চলতে পারে।
• মান পরিবর্তন না করে এমন মূল ইভেন্টগুলি উপেক্ষা করে (যেমন Ctrl, Alt + Tab)।
• একটি রেসের শর্ত সমাধান করে (যখন কলব্যাক কার্যকর করা হয় এবং মানটি ইতিমধ্যে পরিবর্তিত হয়)।

var delay = (function() {
    var timer = {}
      , values = {}
    return function(el) {
        var id = el.form.id + '.' + el.name
        return {
            enqueue: function(ms, cb) {
                if (values[id] == el.value) return
                if (!el.value) return
                var original = values[id] = el.value
                clearTimeout(timer[id])
                timer[id] = setTimeout(function() {
                    if (original != el.value) return // solves race condition
                    cb.apply(el)
                }, ms)
            }
        }
    }
}())

ব্যবহার:

signup.key.addEventListener('keyup', function() {
    delay(this).enqueue(300, function() {
        console.log(this.value)
    })
})

কোডটি এমন একটি স্টাইলে লেখা হয়েছে যা আমি উপভোগ করি, আপনার একগুচ্ছ সেমিকোলন যুক্ত করতে হতে পারে।

জিনিষ মনে রাখা:

• ফর্ম আইডি এবং ইনপুট নামের উপর ভিত্তি করে একটি অনন্য আইডি তৈরি করা হয়, সুতরাং সেগুলি অবশ্যই সংজ্ঞায়িত করা উচিত এবং অনন্য হবে, অথবা আপনি এটি আপনার পরিস্থিতির সাথে সামঞ্জস্য করতে পারেন।
• বিলম্ব এমন কোনও জিনিস দেয় যা আপনার নিজের প্রয়োজনের জন্য প্রসারিত করা সহজ।
• বিলম্বের জন্য ব্যবহৃত মূল উপাদানটি কলব্যাকের সাথে আবদ্ধ, সুতরাং thisপ্রত্যাশার মতো কাজ করে (উদাহরণস্বরূপ)।
• খালি মান দ্বিতীয় বৈধতা এড়ানো হয়।
• এনকুইয়ের জন্য সতর্কতা অবলম্বন করুন , এটি মিলিসেকেন্ডগুলি প্রথমে প্রত্যাশা করে, আমি এটিকে পছন্দ করি তবে আপনি প্যারামিটারগুলি ম্যাচটিতে স্যুইচ করতে চাইতে পারেন setTimeout।

আমি যে সমাধানটি ব্যবহার করি তা জটিলতার আরও একটি স্তর যুক্ত করে, আপনাকে কার্যকর করা বাতিল করতে দেয়, উদাহরণস্বরূপ, তবে এটি আরও ভাল ভিত্তি তৈরি করা।

Answer 16

সিএমএসের উত্তরের ভিত্তিতে, এটি কেবলমাত্র মূল ইভেন্টগুলিকে অগ্রাহ্য করে যা মান পরিবর্তন করে না।

var delay = (function(){
    var timer = 0;
    return function(callback, ms){
      clearTimeout (timer);
      timer = setTimeout(callback, ms);
    };
})(); 

var duplicateFilter=(function(){
  var lastContent;
  return function(content,callback){
    content=$.trim(content);
    if(content!=lastContent){
      callback(content);
    }
    lastContent=content;
  };
})();

$("#some-input").on("keyup",function(ev){

  var self=this;
  delay(function(){
    duplicateFilter($(self).val(),function(c){
        //do sth...
        console.log(c);
    });
  }, 1000 );


})

Answer 17

মিশ্রন , CMS উত্তর দিয়ে মিগুয়েল এর এক শক্তিশালী সমাধান সমবর্তী বিলম্ব যার ফলে উৎপাদ।

var delay = (function(){
    var timers = {};
    return function (callback, ms, label) {
        label = label || 'defaultTimer';
        clearTimeout(timers[label] || 0);
        timers[label] = setTimeout(callback, ms);
    };
})();

যখন আপনাকে স্বাধীনভাবে আলাদা ক্রিয়াটি বিলম্ব করতে হবে তখন তৃতীয় যুক্তিটি ব্যবহার করুন।

$('input.group1').keyup(function() {
    delay(function(){
        alert('Time elapsed!');
    }, 1000, 'firstAction');
});

$('input.group2').keyup(function() {
    delay(function(){
        alert('Time elapsed!');
    }, 1000, '2ndAction');
});

Answer 18

BindWithDelay jQuery প্লাগইন ব্যবহার করুন :

element.bindWithDelay(eventType, [ eventData ], handler(eventObject), timeout, throttle)

Answer 19

var globalTimeout = null;  
$('#search').keyup(function(){
  if(globalTimeout != null) clearTimeout(globalTimeout);  
  globalTimeout =setTimeout(SearchFunc,200);  
});
function SearchFunc(){  
  globalTimeout = null;  
  console.log('Search: '+$('#search').val());
  //ajax code
};

Answer 20

আমি এখানে একটি পরামর্শ লিখেছি যা আপনার ফর্মের একাধিক ইনপুট যত্ন করে।

এই ফাংশনটি আপনার কোডে রেখে ইনপুট ফিল্ডের অবজেক্টটি পায়

function fieldKeyup(obj){
    //  what you want this to do

} // fieldKeyup

এটি আসল বিলম্ব কল কল, একাধিক ইনপুট ক্ষেত্রের যত্ন নেয়

function delayCall(obj,ms,fn){
    return $(obj).each(function(){
    if ( typeof this.timer == 'undefined' ) {
       // Define an array to keep track of all fields needed delays
       // This is in order to make this a multiple delay handling     
          function
        this.timer = new Array();
    }
    var obj = this;
    if (this.timer[obj.id]){
        clearTimeout(this.timer[obj.id]);
        delete(this.timer[obj.id]);
    }

    this.timer[obj.id] = setTimeout(function(){
        fn(obj);}, ms);
    });
}; // delayCall

ব্যবহার:

$("#username").on("keyup",function(){
    delayCall($(this),500,fieldKeyup);
});

Answer 21

ES6 থেকে , কেউ তীর ফাংশন সিনট্যাক্সও ব্যবহার করতে পারে ।

এই উদাহরণস্বরূপ, keyupব্যবহারকারীরা searchFuncক্যোয়ারির অনুরোধ করার আগে কল করার আগে টাইপ করা শেষ করার পরে কোডটি 400 মিমি ইভেন্টের জন্য বিলম্ব করে ।

const searchbar = document.getElementById('searchBar');
const searchFunc = // any function

// wait ms (milliseconds) after user stops typing to execute func
const delayKeyUp = (() => {
    let timer = null;
    const delay = (func, ms) => {
        timer ? clearTimeout(timer): null
        timer = setTimeout(func, ms)
    }
    return delay
})();

searchbar.addEventListener('keyup', (e) => {
    const query = e.target.value;
    delayKeyUp(() => {searchFunc(query)}, 400);
})

Answer 22

jQuery :

var timeout = null;
$('#input').keyup(function() {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
      console.log($(this).val());
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="text" id="input" placeholder="Type here..."/>

খাঁটি জাভাস্ক্রিপ্ট:

let input = document.getElementById('input');
let timeout = null;

input.addEventListener('keyup', function (e) {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        console.log('Value:', input.value);
    }, 1000);
});

<input type="text" id="input" placeholder="Type here..."/>

Answer 23

কটাক্ষপাত স্বয়ংসম্পূর্ণ প্লাগইন। আমি জানি যে এটি আপনাকে বিলম্ব বা ন্যূনতম সংখ্যার অক্ষর নির্দিষ্ট করতে দেয়। এমনকি আপনি প্লাগইনটি ব্যবহার না করেও কোডটি সন্ধান করা আপনাকে কীভাবে এটি প্রয়োগ করতে হয় সে সম্পর্কে কিছু ধারণা দেয়।

Answer 24

ভাল, আমি কীপ / কীডাউন দ্বারা সীমাবদ্ধ উচ্চ ফ্রিকোয়েন্সি এজ্যাক্স অনুরোধের জন্য কোডের একটি অংশ তৈরি করেছি। এটা দেখ:

https://github.com/raincious/jQueue

আপনার ক্যোয়ারীটি এভাবে করুন:

var q = new jQueue(function(type, name, callback) {
    return $.post("/api/account/user_existed/", {Method: type, Value: name}).done(callback);
}, 'Flush', 1500); // Make sure use Flush mode.

এবং ইভেন্টটিকে এইভাবে আবদ্ধ করুন:

$('#field-username').keyup(function() {
    q.run('Username', this.val(), function() { /* calling back */ });
});

Answer 25

এটি আজ একটু দেরীতে দেখেছি তবে অন্য কারোর প্রয়োজন হলে কেবল এটি এখানে রাখতে চান। এটিকে পুনরায় ব্যবহারযোগ্য করে তুলতে কেবল ফাংশনটি আলাদা করুন। নীচের কোডটি টাইপিং স্টপ করার পরে 1/2 সেকেন্ড অপেক্ষা করবে।

    var timeOutVar
$(selector).on('keyup', function() {

                    clearTimeout(timeOutVar);
                    timeOutVar= setTimeout(function(){ console.log("Hello"); }, 500);
                });

Answer 26

ব্যবহারকারী লোডাস জাভাস্ক্রিপ্ট লাইব্রেরি এবং _.debounce ফাংশন ব্যবহার করুন

changeName: _.debounce(function (val) {
  console.log(val)                
}, 1000)

Answer 27

// Get an global variable isApiCallingInProgress

//  check isApiCallingInProgress 
if (!isApiCallingInProgress) {
// set it to isApiCallingInProgress true
      isApiCallingInProgress = true;

      // set timeout
      setTimeout(() => {
         // Api call will go here

        // then set variable again as false
        isApiCallingInProgress = false;     
      }, 1000);
}