उपयोगकर्ता टाइपिंग बंद होने तक .keyup () हैंडलर में देरी कैसे करें?

Question

मुझे एक खोज क्षेत्र मिला है। अभी यह हर की-अप की खोज करता है। इसलिए अगर कोई "विंडोज" टाइप करता है, तो यह हर की-अप के लिए AJAX के साथ एक खोज करेगा: "W", "वाई", "विन", "विंड", "विंडो", "विंडो", "विंडोज"।

मैं एक देरी करना चाहता हूं, इसलिए यह केवल तभी खोजता है जब उपयोगकर्ता 200 एमएस के लिए टाइप करना बंद कर देता है।

keyupफ़ंक्शन में इसके लिए कोई विकल्प नहीं है , और मैंने कोशिश की है setTimeout, लेकिन यह काम नहीं किया।

मैं उसे कैसे कर सकता हूँ?

Comments

का डुप्लीकेट stackoverflow.com/questions/1620602/...

— Roatin Marth

अगर मैं कर सकता था, तो मैं इसे डुप्लिकेट के रूप में बंद कर दूंगा।

— a432511

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

— मैटिस

यदि भविष्य में लोग एक ही सवाल के 100 हो, तो शानदार जवाबों से हर कोई लाभ नहीं ले पाएगा, इसलिए प्रत्येक व्यक्ति को मूल प्रश्न पर रोक लगाना और सभी को मूल प्रश्न पर पुनर्निर्देशित करना सर्वोत्तम प्रथाओं और सुधारों को खोजने के लिए बेहतर है। डुप्लिकेट के बंद होने के बारे में अधिक जानकारी के लिए stackoverflow.com/help/duplicates देखें ।

— rncrtr

यह उस तरह से अधिक लोकप्रिय है जिस तरह से यह डुप्लिकेट था। यह बेहतर शब्द है, इसमें बेहतर उत्तर हैं, Google आदि पर उच्च रैंक है .. इसलिए इस उत्तर से कई लाभान्वित हुए हैं। रेट्रोस्पेक्ट में, अगर यह बंद होता तो शर्म की बात होती। कुछ तुच्छ हैं जो डुप्लिकेट के रूप में खराब हैं, लेकिन यह उस श्रेणी में नहीं आता है।

— यूजर

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) को पारित करता है ।

UPDATE 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 प्लगइन के रूप में लागू किया जाए। यहाँ एक डेमो पेज है: briangrinstead.com/files/bindWithDelay

— ब्रायन

मैंने शुरू में टाइप किए गए अक्षरों की मात्रा को हार्डकोड किया, यह दृष्टिकोण गुड़ (सल्फर के बिना) के रूप में चिकना है

— हर

जब मैं $ .post () के साथ इसका उपयोग करता हूं तो यह एक ही समय में टाइप की गई हर चीज को भेजता है, लेकिन यह उतनी बार भेजती है जितनी कि मेरे पास कीप थी। क्या समय समाप्त होने पर केवल भेजने का एक तरीका है?

— ntgCleaner

लेकिन यह काम नहीं करता है अगर im दो या दो से अधिक अलग-अलग कार्यों को बुलाता है जो व्यक्तिगत देरी की आवश्यकता होती है। मैंने इसके बजाय इस समाधान को stackoverflow.com/a/30503848/1834212

— Miguel

मैं शीर्ष टिप्पणी में जुड़े 'bindWithDelay' प्लगइन की सिफारिश करता हूं। लेकिन मैं इस प्रश्न का @ हेज़िडर का उत्तर देता हूं (नीचे - stackoverflow.com/a/19259625/368896 ), जो इस उत्तर से बेहतर है और विभिन्न तत्वों के लिए अलग-अलग टाइमर की अनुमति देने के लिए सरल, स्लीक बाइंडिंग के पीछे के विचार को समझने के लिए अध्ययन करने लायक है - ऊपर दिए गए प्लगइन कोड में समान सिद्धांत का उपयोग किया गया है, लेकिन समझने में आसान है।

— दान निसेनबौम

Answer 2

यदि आप टाइप करने के बाद खोजना चाहते हैं, तो एक वैश्विक वैरिएबल का उपयोग अपने setTimoutकॉल से दिए गए टाइमआउट को होल्ड करने के लिए करें और इसे रद्द कर दें clearTimeoutयदि यह अभी तक खुश नहीं हुआ है तो यह अंतिम keyupइवेंट को छोड़कर टाइमआउट को फायर नहीं करेगा।

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/indindWithDelay.js। उस प्लगइन का सामान्य दृष्टिकोण आपके कोड के समान है, इसलिए आपका कोड अधिक परिष्कृत प्लगइन को समझने की कोशिश करने से पहले इसकी सादगी को समझने के लिए सावधानीपूर्वक अध्ययन करने के लायक है। मैं उस प्लगइन की सिफारिश करता हूं, हालांकि - लेकिन अगर आपको थ्रॉटल या इवेंट डेटा पास करने की आवश्यकता नहीं है, तो आपका कोड बहुत अच्छा है! दो अच्छे विकल्प। धन्यवाद!

— दान निसेनबौम

हम्म, यह मेरे लिए देरी करता है लेकिन फिर someApiCallभी कई बार ट्रिगर होता है - अब केवल इनपुट फ़ील्ड के अंतिम मूल्य के साथ।

— Roelant

Answer 4

आप अंडरस्कोर । Js को भी देख सकते हैं , जो डिबेट जैसे उपयोगी तरीके प्रदान करता है :

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

Comments

लोधश में भी वही उपलब्ध है - lodash.com/docs/#debounce

— आदर्श मादरेचा

Answer 5

CMS के उत्तर के आधार पर, मैंने इसे बनाया:

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

विलंब मल्टी फंक्शन लेबल का उपयोग करके कॉल करता है

यह समाधान है जिसके साथ मैं काम करता हूं। यह आप चाहते हैं कि किसी भी समारोह पर निष्पादन में देरी होगी । यह कुंजी खोज खोज क्वेरी हो सकती है, शायद पिछले या अगले बटन पर त्वरित क्लिक (जो अन्यथा कई अनुरोधों को भेज देगा यदि जल्दी से लगातार क्लिक किया जाता है, और सभी के बाद उपयोग नहीं किया जाता है)। यह एक वैश्विक ऑब्जेक्ट का उपयोग करता है जो प्रत्येक निष्पादन समय को संग्रहीत करता है, और सबसे वर्तमान अनुरोध के साथ इसकी तुलना करता है।

तो परिणाम यह है कि केवल अंतिम क्लिक / कार्रवाई वास्तव में कहा जाएगा, क्योंकि उन अनुरोधों को एक कतार में संग्रहीत किया जाता है, कि एक्स मिलीसेकंड के बाद कॉल किया जाता है यदि कतार में समान लेबल के साथ कोई अन्य अनुरोध मौजूद नहीं है!

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

आप अपना विलंब समय (इसके वैकल्पिक, डिफ़ॉल्ट को 500ms) पर सेट कर सकते हैं। और एक "क्लोजर फैशन" में अपने फ़ंक्शन तर्क भेजें।

उदाहरण के लिए यदि आप बलो फ़ंक्शन को कॉल करना चाहते हैं:

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

एकाधिक send_ajax अनुरोधों को रोकने के लिए, आप उनका उपयोग करने में देरी करते हैं:

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

हर अनुरोध जो लेबल "चेक डेट" का उपयोग करता है, केवल तभी ट्रिगर किया जाएगा जब कोई अन्य अनुरोध 600 मील के सेकंड टाइमफ़्रेम में नहीं किया गया हो। यह तर्क वैकल्पिक है

लेबल इंडिपेंडेंस (एक ही लक्ष्य फ़ंक्शन को कॉल करना) लेकिन दोनों को चलाएं:

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

एक ही फ़ंक्शन को कॉल करने में परिणाम लेकिन उनके लेबल अलग-अलग होने के कारण उन्हें स्वतंत्र रूप से विलंबित करता है

Comments

मैं एक परियोजना में आपके कोड का उपयोग कर रहा हूं, जिस पर मैं काम कर रहा हूं और इसके साथ कठिनाई हो रही है। यह वास्तव में कुछ भी देरी नहीं है। सोचा कि आप सहायता देखना / प्रदान करना चाहते हैं। stackoverflow.com/questions/51393779/…

— केडीजे

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

महान! आसान समाधान जो ठीक काम करता है!

— Fellipe Sanches

मैं यह पसंद है। वास्तव में पुन: प्रयोज्य नहीं, लेकिन समझने में आसान है।

— विंसेंट

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

धन्यवाद! ऊपर दिए गए लोकप्रिय उत्तर काम नहीं आए ... लेकिन आपके सुझाव ने पूरी तरह से काम किया।

— user2662680

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

अपेक्षित रूप से काम नहीं करता है - भ्रूण की संख्या समान है, बस 300ms से देरी हो रही है - आपको सेट टाइमआउट ()

— Picard

ठीक है, आपको इस मामले में क्लियरटाइम का उपयोग करने की आवश्यकता नहीं है। शर्त searchValue == $ ('# searchText')। Val () setTimeout के अंदर यह सुनिश्चित करेगी कि मूल्य वही है जो पहले 300ms था। मुझे पता है अगर यह समझ में आता है। धन्यवाद।

— सागर गाला

Answer 11

मुझे आश्चर्य है कि किसी ने भी CMS की बहुत अच्छी छीन में कई इनपुट के साथ समस्या का उल्लेख नहीं किया है।

मूल रूप से, आपको प्रत्येक इनपुट के लिए व्यक्तिगत रूप से देरी चर को परिभाषित करना होगा। अन्यथा अगर sb ने पहले इनपुट पर टेक्स्ट डाला और जल्दी से दूसरे इनपुट पर कूद गया और टाइप करना शुरू कर दिया, तो पहले वाले के लिए कॉलबैक नहीं होगा !

अन्य उत्तरों के आधार पर नीचे दिया गया कोड देखें:

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

यह समाधान इनपुट के विलंबित चर के भीतर सेटटाइमआउट संदर्भ रखता है। जैसा कि fazzyx ने सुझाव दिया है, यह कॉलबैक के लिए तत्व का संदर्भ भी देता है।

IE6, 8 (COMP - 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

CMS के उत्तर के आधार पर, यह उन महत्वपूर्ण घटनाओं को अनदेखा करता है जो मूल्य नहीं बदलती हैं।

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

मिगुएल के एक के साथ सीएमएस उत्तर को संयोजित करने से एक मजबूत समाधान निकलता है जो समवर्ती देरी की अनुमति देता है।

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से पहले उपयोगकर्ताओं द्वारा टाइपिंग समाप्त करने के बाद 400ms के लिए कोड देरी घटना searchFunc।

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

ठीक है, मैंने Keyup / Keydown के कारण उच्च आवृत्ति अजाक्स अनुरोध सीमा के लिए कोड का एक टुकड़ा भी बनाया। इसकी जांच करें:

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