Ask a Question Register Login

javascript - How to delay the .keyup() handler until the user stops typing?

946

I’ve got a search field. Right now it searches for every keyup. So if someone types “Windows”, it will make a search with AJAX for every keyup: “W”, “Wi”, “Win”, “Wind”, “Windo”, “Window”, “Windows”.

I want to have a delay, so it only searches when the user stops typing for 200 ms.

There is no option for this in thekeyup function, and I have triedsetTimeout, but it didn’t work.

How can I do that?

155

Answer

Solution:

I use this small function for the same purpose, executing a function after the user has stopped typing for a specified amount of time or in events that fire at a high rate, likeresize:

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>
Write your answer



144
votes

Answer

Solution:

If you want to search after the type is done use a global variable to hold the timeout returned from yoursetTimout call and cancel it with aclearTimeout if it hasn't yet happend so that it won't fire the timeout except on the lastkeyup event

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

Or with an anonymous function :

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

    //ajax code

  }, 200);  
}
Write your answer



510
votes

Answer

Solution:

Another slight enhancement on CMS's answer. To easily allow for separate delays, you can use the following:

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

If you want to reuse the same delay, just do

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

If you want separate delays, you can do

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



143
votes

Answer

Solution:

You could also look at underscore.js, which provides utility methods like debounce:

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



870
votes

Answer

Solution:

Explanation

Use a variable to store the timeout function. Then use to clear this variable of any active timeout functions, and then use to set the active timeout function again. We runclearTimeout() first, because if a user is typing "hello", we want our function to run shortly after the user presses the "o" key (and not once for each letter).

Working Demo

Super simple approach, designed to run a function after a user has finished typing in a text field...

    $(document).ready(function(e) {
        var timeout;
        var delay = 2000;   // 2 seconds

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

        function myFunction() {
            $('#status').html("Executing function for user!");
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Status: <span id="status">Default Status</span><br>
<textarea name="text-input" class="text-input"></textarea>
Write your answer



634
votes

Answer

Solution:

Based on the answer of CMS, I made this :

Put the code below after include 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);

And simply use like this :

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

Careful : the $(this) variable in the function passed as a parameter does not match input

Write your answer



590
votes

Answer

Solution:

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..."/>
Write your answer



948
votes

Answer

Solution:

Delay Multi Function Calls using Labels

This is the solution i work with. It will delay the execution on ANY function you want. It can be the keydown search query, maybe the quick click on previous or next buttons ( that would otherwise send multiple request if quickly clicked continuously , and be not used after all). This uses a global object that stores each execution time, and compares it with the most current request.

So the result is that only that last click / action will actually be called, because those requests are stored in a queue, that after the X milliseconds is called if no other request with the same label exists in the queue!

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

You can set your own delay time ( its optional, defaults to 500ms). And send your function arguments in a "closure fashion".

For example if you want to call the bellow function:

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

To prevent multiple send_ajax requests, you delay them using:

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

Every request that uses the label "check date" will only be triggered if no other request is made in the 600 miliseconds timeframe. This argument is optional

Label independency (calling the same target function) but run both: 

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

Results in calling the same function but delay them independently because of their labels being different

Write your answer



851
votes

Answer

Solution:

If someone like to delay the same function, and without external variable he can use the next script:

function MyFunction() {

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

        //Execute the function code here...

    }, 500);
}
Write your answer



133
votes

Answer

Solution:

This function extends the function from Gaten's answer a bit in order to get the element back:

$.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/

Write your answer



64
votes

Answer

Solution:

I'm surprised that nobody mention the problem with multiple input in CMS's very nice snipped.

Basically, you would have to define delay variable individually for each input. Otherwise if sb put text to first input and quickly jump to other input and start typing, callback for the first one WON'T be called!

See the code below I came with based on other answers:

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

This solution keeps setTimeout reference within input's delayTimer variable. It also passes reference of element to callback as fazzyx suggested.

Tested in IE6, 8(comp - 7), 8 and Opera 12.11.

Write your answer



118
votes

Answer

Solution:

This worked for me where I delay the search logic operation and make a check if the value is same as entered in text field. If value is same then I go ahead and perform the operation for the data related to search value.

$('#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);
});
Write your answer



46
votes

Answer

Solution:

Delay function to call up on every keyup. jQuery 1.7.1 or up required

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

Usage:$('#searchBox').keyupDelay( cb );

Write your answer



519
votes

Answer

Solution:

From ES6, one can use arrow function syntax as well.

In this example, the code delayskeyup event for 400ms after users finish typeing before callingsearchFunc make a query request.

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

Updated Typescript version:

const delayKeyUp = (() => {
  let timer: NodeJS.Timeout;
  return (func: Function, ms: number) => {
    timer ? clearTimeout(timer) : null;
    timer = setTimeout(() => func(), ms);
  };
})();
Write your answer



372
votes

Answer

Solution:

This is a solution along the lines of CMS's, but solves a few key issues for me:

  • Supports multiple inputs, delays can run concurrently.
  • Ignores key events that didn't changed the value (like Ctrl, Alt+Tab).
  • Solves a race condition (when the callback is executed and the value already changed).
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)
            }
        }
    }
}())

Usage:

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

The code is written in a style I enjoy, you may need to add a bunch of semicolons.

Things to keep in mind:

  • A unique id is generated based on the form id and input name, so they must be defined and unique, or you could adjust it to your situation.
  • delay returns an object that's easy to extend for your own needs.
  • The original element used for delay is bound to the callback, sothis works as expected (like in the example).
  • Empty value is ignored in the second validation.
  • Watch out for enqueue, it expects milliseconds first, I prefer that, but you may want to switch the parameters to matchsetTimeout.

The solution I use adds another level of complexity, allowing you to cancel execution, for example, but this is a good base to build on.

Write your answer



470
votes

Answer

Solution:

Combining CMS answer with Miguel's one yields a robust solution allowing concurrent delays.

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

When you need to delay different actions independently, use the third argument.

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

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



31
votes

Answer

Solution:

Building upon CMS's answer here's new delay method which preserves 'this' in its usage:

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

Usage:

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



547
votes

Answer

Solution:

If you want to do something after a period of time and reset that timer after a specific event likekeyup, the best solution is made withclearTimeout andsetTimeout methods:

// declare the timeout variable out of the event listener or in the global scope
var timeout = null;

$(".some-class-or-selector-to-bind-event").keyup(function() {
    clearTimeout(timout); // this will clear the recursive unneccessary calls
    timeout = setTimeout(() => {
         // do something: send an ajax or call a function here
    }, 2000);
    // wait two seconds

});
Write your answer



105
votes

Answer

Solution:

Use 

mytimeout = setTimeout( expression, timeout );

where expression is the script to run and timeout is the time to wait in milliseconds before it runs - this does NOT hault the script, but simply delays execution of that part until the timeout is done.

clearTimeout(mytimeout);

will reset/clear the timeout so it does not run the script in expression (like a cancel) as long as it has not yet been executed.

Write your answer



491
votes

Answer

Solution:

Based on the answer of CMS, it just ignores the key events that doesn't change value. 

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


})
Write your answer



850
votes

Answer

Solution:

User lodash javascript library and use _.debounce function

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



950
votes

Answer

Solution:

Use the bindWithDelay jQuery plugin:

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



173
votes

Answer

Solution:

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
};
Write your answer



96
votes

Answer

Solution:

Here is a suggestion I have written that takes care of multiple input in your form.

This function gets the Object of the input field, put in your code

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

} // fieldKeyup

This is the actual delayCall function, takes care of multiple input fields

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

Usage:

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



548
votes

Answer

Solution:

Take a look at the autocomplete plugin. I know that it allows you to specify a delay or a minimum number of characters. Even if you don't end up using the plugin, looking through the code will give you some ideas on how to implement it yourself.

Write your answer



176
votes

Answer

Solution:

Well, i also made a piece of code for limit high frequency ajax request cause by Keyup / Keydown. Check this out:

https://github.com/raincious/jQueue

Do your query like this:

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.

And bind event like this:

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



708
votes

Answer

Solution:

Saw this today a little late but just want to put this here in case someone else needed. just separate the function to make it reusable. the code below will wait 1/2 second after typing stop.

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

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



563
votes

Answer

Solution:

// 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);
}
Write your answer



Share solution ↓

Additional Information:
Link To Source
People are also looking for solutions of the problem: to enable extensions, verify that they are enabled in your .ini files

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Similar questions

Find the answer in similar questions on our website.

73 javascript - Prestashop: Delete user uploaded file via AJAX instead of reloading page
209 javascript - Prevent IE users from loading a webpage
184 javascript - AJAX wait until file exist on another server
829 php - Adding extra fields - Wordpress (wp_insert_user & update_user_meta doesn't work)
554 javascript - Server-Sent Events Polling causing long delays
284 html - php user form registration
822 javascript - How to show the data from database in a alert box as html table when td is double clicked
71 javascript - How to get address location from latitude and longitude in Google Map.?
118 php - Upload or move image into the folder through javascript
375 javascript - How to make a website prevent mobile from sleeping

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.





About the technologies asked in this question

JavaScript

JavaScript is a multi-paradigm language that supports event-driven, functional, and mandatory (including object-oriented and prototype-based) programming types. Originally JavaScript was only used on the client side. JavaScript is now still used as a server-side programming language. To summarize, we can say that JavaScript is the language of the Internet.
https://www.javascript.com/


JQuery

JQuery is arguably the most popular JavaScript library with so many features for modern development. JQuery is a fast and concise JavaScript library created by John Resig in 2006. It is a cross-platform JavaScript library designed to simplify client-side HTML scripting. Over 19 million websites are currently using jQuery! Companies like WordPress, Facebook, Google, IBM and many more rely on jQuery to provide a kind of web browsing experience.
https://jquery.com/


HTML

HTML (English "hyper text markup language" - hypertext markup language) is a special markup language that is used to create sites on the Internet. Browsers understand html perfectly and can interpret it in an understandable way. In general, any page on the site is html-code, which the browser translates into a user-friendly form. By the way, the code of any page is available to everyone.
https://www.w3.org/html/

Welcome to programmierfrage.com

programmierfrage.com is a question and answer site for professional web developers, programming enthusiasts and website builders. Site created and operated by the community. Together with you, we create a free library of detailed answers to any question on programming, web development, website creation and website administration.

Get answers to specific questions

Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.

Help Others Solve Their Issues

Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.

144

Answer

Solution:

If you want to search after the type is done use a global variable to hold the timeout returned from yoursetTimout call and cancel it with aclearTimeout if it hasn't yet happend so that it won't fire the timeout except on the lastkeyup event

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

Or with an anonymous function :

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

    //ajax code

  }, 200);  
}
510

Answer

Solution:

Another slight enhancement on CMS's answer. To easily allow for separate delays, you can use the following:

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

If you want to reuse the same delay, just do

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

If you want separate delays, you can do

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

Answer

Solution:

You could also look at underscore.js, which provides utility methods like debounce:

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

Answer

Solution:

Explanation

Use a variable to store the timeout function. Then use to clear this variable of any active timeout functions, and then use to set the active timeout function again. We runclearTimeout() first, because if a user is typing "hello", we want our function to run shortly after the user presses the "o" key (and not once for each letter).

Working Demo

Super simple approach, designed to run a function after a user has finished typing in a text field...

    $(document).ready(function(e) {
        var timeout;
        var delay = 2000;   // 2 seconds

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

        function myFunction() {
            $('#status').html("Executing function for user!");
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Status: <span id="status">Default Status</span><br>
<textarea name="text-input" class="text-input"></textarea>
Write your answer



634
votes

Answer

Solution:

Based on the answer of CMS, I made this :

Put the code below after include 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);

And simply use like this :

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

Careful : the $(this) variable in the function passed as a parameter does not match input

Write your answer



590
votes

Answer

Solution:

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..."/>
Write your answer



948
votes

Answer

Solution:

Delay Multi Function Calls using Labels

This is the solution i work with. It will delay the execution on ANY function you want. It can be the keydown search query, maybe the quick click on previous or next buttons ( that would otherwise send multiple request if quickly clicked continuously , and be not used after all). This uses a global object that stores each execution time, and compares it with the most current request.

So the result is that only that last click / action will actually be called, because those requests are stored in a queue, that after the X milliseconds is called if no other request with the same label exists in the queue!

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

You can set your own delay time ( its optional, defaults to 500ms). And send your function arguments in a "closure fashion".

For example if you want to call the bellow function:

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

To prevent multiple send_ajax requests, you delay them using:

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

Every request that uses the label "check date" will only be triggered if no other request is made in the 600 miliseconds timeframe. This argument is optional

Label independency (calling the same target function) but run both: 

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

Results in calling the same function but delay them independently because of their labels being different

Write your answer



851
votes

Answer

Solution:

If someone like to delay the same function, and without external variable he can use the next script:

function MyFunction() {

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

        //Execute the function code here...

    }, 500);
}
Write your answer



133
votes

Answer

Solution:

This function extends the function from Gaten's answer a bit in order to get the element back:

$.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/

Write your answer



64
votes

Answer

Solution:

I'm surprised that nobody mention the problem with multiple input in CMS's very nice snipped.

Basically, you would have to define delay variable individually for each input. Otherwise if sb put text to first input and quickly jump to other input and start typing, callback for the first one WON'T be called!

See the code below I came with based on other answers:

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

This solution keeps setTimeout reference within input's delayTimer variable. It also passes reference of element to callback as fazzyx suggested.

Tested in IE6, 8(comp - 7), 8 and Opera 12.11.

Write your answer



118
votes

Answer

Solution:

This worked for me where I delay the search logic operation and make a check if the value is same as entered in text field. If value is same then I go ahead and perform the operation for the data related to search value.

$('#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);
});
Write your answer



46
votes

Answer

Solution:

Delay function to call up on every keyup. jQuery 1.7.1 or up required

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

Usage:$('#searchBox').keyupDelay( cb );

Write your answer



519
votes

Answer

Solution:

From ES6, one can use arrow function syntax as well.

In this example, the code delayskeyup event for 400ms after users finish typeing before callingsearchFunc make a query request.

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

Updated Typescript version:

const delayKeyUp = (() => {
  let timer: NodeJS.Timeout;
  return (func: Function, ms: number) => {
    timer ? clearTimeout(timer) : null;
    timer = setTimeout(() => func(), ms);
  };
})();
Write your answer



372
votes

Answer

Solution:

This is a solution along the lines of CMS's, but solves a few key issues for me:

  • Supports multiple inputs, delays can run concurrently.
  • Ignores key events that didn't changed the value (like Ctrl, Alt+Tab).
  • Solves a race condition (when the callback is executed and the value already changed).
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)
            }
        }
    }
}())

Usage:

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

The code is written in a style I enjoy, you may need to add a bunch of semicolons.

Things to keep in mind:

  • A unique id is generated based on the form id and input name, so they must be defined and unique, or you could adjust it to your situation.
  • delay returns an object that's easy to extend for your own needs.
  • The original element used for delay is bound to the callback, sothis works as expected (like in the example).
  • Empty value is ignored in the second validation.
  • Watch out for enqueue, it expects milliseconds first, I prefer that, but you may want to switch the parameters to matchsetTimeout.

The solution I use adds another level of complexity, allowing you to cancel execution, for example, but this is a good base to build on.

Write your answer



470
votes

Answer

Solution:

Combining CMS answer with Miguel's one yields a robust solution allowing concurrent delays.

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

When you need to delay different actions independently, use the third argument.

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

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



31
votes

Answer

Solution:

Building upon CMS's answer here's new delay method which preserves 'this' in its usage:

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

Usage:

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



547
votes

Answer

Solution:

If you want to do something after a period of time and reset that timer after a specific event likekeyup, the best solution is made withclearTimeout andsetTimeout methods:

// declare the timeout variable out of the event listener or in the global scope
var timeout = null;

$(".some-class-or-selector-to-bind-event").keyup(function() {
    clearTimeout(timout); // this will clear the recursive unneccessary calls
    timeout = setTimeout(() => {
         // do something: send an ajax or call a function here
    }, 2000);
    // wait two seconds

});
Write your answer



105
votes

Answer

Solution:

Use 

mytimeout = setTimeout( expression, timeout );

where expression is the script to run and timeout is the time to wait in milliseconds before it runs - this does NOT hault the script, but simply delays execution of that part until the timeout is done.

clearTimeout(mytimeout);

will reset/clear the timeout so it does not run the script in expression (like a cancel) as long as it has not yet been executed.

Write your answer



491
votes

Answer

Solution:

Based on the answer of CMS, it just ignores the key events that doesn't change value. 

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


})
Write your answer



850
votes

Answer

Solution:

User lodash javascript library and use _.debounce function

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



950
votes

Answer

Solution:

Use the bindWithDelay jQuery plugin:

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



173
votes

Answer

Solution:

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
};
Write your answer



96
votes

Answer

Solution:

Here is a suggestion I have written that takes care of multiple input in your form.

This function gets the Object of the input field, put in your code

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

} // fieldKeyup

This is the actual delayCall function, takes care of multiple input fields

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

Usage:

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



548
votes

Answer

Solution:

Take a look at the autocomplete plugin. I know that it allows you to specify a delay or a minimum number of characters. Even if you don't end up using the plugin, looking through the code will give you some ideas on how to implement it yourself.

Write your answer



176
votes

Answer

Solution:

Well, i also made a piece of code for limit high frequency ajax request cause by Keyup / Keydown. Check this out:

https://github.com/raincious/jQueue

Do your query like this:

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.

And bind event like this:

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



708
votes

Answer

Solution:

Saw this today a little late but just want to put this here in case someone else needed. just separate the function to make it reusable. the code below will wait 1/2 second after typing stop.

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

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



563
votes

Answer

Solution:

// 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);
}
Write your answer



Share solution ↓

Additional Information:
Link To Source
People are also looking for solutions of the problem: to enable extensions, verify that they are enabled in your .ini files

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Similar questions

Find the answer in similar questions on our website.

73 javascript - Prestashop: Delete user uploaded file via AJAX instead of reloading page
209 javascript - Prevent IE users from loading a webpage
184 javascript - AJAX wait until file exist on another server
829 php - Adding extra fields - Wordpress (wp_insert_user & update_user_meta doesn't work)
554 javascript - Server-Sent Events Polling causing long delays
284 html - php user form registration
822 javascript - How to show the data from database in a alert box as html table when td is double clicked
71 javascript - How to get address location from latitude and longitude in Google Map.?
118 php - Upload or move image into the folder through javascript
375 javascript - How to make a website prevent mobile from sleeping
634

Answer

Solution:

Based on the answer of CMS, I made this :

Put the code below after include 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);

And simply use like this :

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

Careful : the $(this) variable in the function passed as a parameter does not match input

590

Answer

Solution:

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..."/>
Write your answer



948
votes

Answer

Solution:

Delay Multi Function Calls using Labels

This is the solution i work with. It will delay the execution on ANY function you want. It can be the keydown search query, maybe the quick click on previous or next buttons ( that would otherwise send multiple request if quickly clicked continuously , and be not used after all). This uses a global object that stores each execution time, and compares it with the most current request.

So the result is that only that last click / action will actually be called, because those requests are stored in a queue, that after the X milliseconds is called if no other request with the same label exists in the queue!

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

You can set your own delay time ( its optional, defaults to 500ms). And send your function arguments in a "closure fashion".

For example if you want to call the bellow function:

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

To prevent multiple send_ajax requests, you delay them using:

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

Every request that uses the label "check date" will only be triggered if no other request is made in the 600 miliseconds timeframe. This argument is optional

Label independency (calling the same target function) but run both: 

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

Results in calling the same function but delay them independently because of their labels being different

Write your answer



851
votes

Answer

Solution:

If someone like to delay the same function, and without external variable he can use the next script:

function MyFunction() {

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

        //Execute the function code here...

    }, 500);
}
Write your answer



133
votes

Answer

Solution:

This function extends the function from Gaten's answer a bit in order to get the element back:

$.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/

Write your answer



64
votes

Answer

Solution:

I'm surprised that nobody mention the problem with multiple input in CMS's very nice snipped.

Basically, you would have to define delay variable individually for each input. Otherwise if sb put text to first input and quickly jump to other input and start typing, callback for the first one WON'T be called!

See the code below I came with based on other answers:

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

This solution keeps setTimeout reference within input's delayTimer variable. It also passes reference of element to callback as fazzyx suggested.

Tested in IE6, 8(comp - 7), 8 and Opera 12.11.

Write your answer



118
votes

Answer

Solution:

This worked for me where I delay the search logic operation and make a check if the value is same as entered in text field. If value is same then I go ahead and perform the operation for the data related to search value.

$('#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);
});
Write your answer



46
votes

Answer

Solution:

Delay function to call up on every keyup. jQuery 1.7.1 or up required

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

Usage:$('#searchBox').keyupDelay( cb );

Write your answer



519
votes

Answer

Solution:

From ES6, one can use arrow function syntax as well.

In this example, the code delayskeyup event for 400ms after users finish typeing before callingsearchFunc make a query request.

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

Updated Typescript version:

const delayKeyUp = (() => {
  let timer: NodeJS.Timeout;
  return (func: Function, ms: number) => {
    timer ? clearTimeout(timer) : null;
    timer = setTimeout(() => func(), ms);
  };
})();
Write your answer



372
votes

Answer

Solution:

This is a solution along the lines of CMS's, but solves a few key issues for me:

  • Supports multiple inputs, delays can run concurrently.
  • Ignores key events that didn't changed the value (like Ctrl, Alt+Tab).
  • Solves a race condition (when the callback is executed and the value already changed).
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)
            }
        }
    }
}())

Usage:

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

The code is written in a style I enjoy, you may need to add a bunch of semicolons.

Things to keep in mind:

  • A unique id is generated based on the form id and input name, so they must be defined and unique, or you could adjust it to your situation.
  • delay returns an object that's easy to extend for your own needs.
  • The original element used for delay is bound to the callback, sothis works as expected (like in the example).
  • Empty value is ignored in the second validation.
  • Watch out for enqueue, it expects milliseconds first, I prefer that, but you may want to switch the parameters to matchsetTimeout.

The solution I use adds another level of complexity, allowing you to cancel execution, for example, but this is a good base to build on.

Write your answer



470
votes

Answer

Solution:

Combining CMS answer with Miguel's one yields a robust solution allowing concurrent delays.

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

When you need to delay different actions independently, use the third argument.

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

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



31
votes

Answer

Solution:

Building upon CMS's answer here's new delay method which preserves 'this' in its usage:

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

Usage:

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



547
votes

Answer

Solution:

If you want to do something after a period of time and reset that timer after a specific event likekeyup, the best solution is made withclearTimeout andsetTimeout methods:

// declare the timeout variable out of the event listener or in the global scope
var timeout = null;

$(".some-class-or-selector-to-bind-event").keyup(function() {
    clearTimeout(timout); // this will clear the recursive unneccessary calls
    timeout = setTimeout(() => {
         // do something: send an ajax or call a function here
    }, 2000);
    // wait two seconds

});
Write your answer



105
votes

Answer

Solution:

Use 

mytimeout = setTimeout( expression, timeout );

where expression is the script to run and timeout is the time to wait in milliseconds before it runs - this does NOT hault the script, but simply delays execution of that part until the timeout is done.

clearTimeout(mytimeout);

will reset/clear the timeout so it does not run the script in expression (like a cancel) as long as it has not yet been executed.

Write your answer



491
votes

Answer

Solution:

Based on the answer of CMS, it just ignores the key events that doesn't change value. 

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


})
Write your answer



850
votes

Answer

Solution:

User lodash javascript library and use _.debounce function

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



950
votes

Answer

Solution:

Use the bindWithDelay jQuery plugin:

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



173
votes

Answer

Solution:

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
};
Write your answer



96
votes

Answer

Solution:

Here is a suggestion I have written that takes care of multiple input in your form.

This function gets the Object of the input field, put in your code

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

} // fieldKeyup

This is the actual delayCall function, takes care of multiple input fields

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

Usage:

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



548
votes

Answer

Solution:

Take a look at the autocomplete plugin. I know that it allows you to specify a delay or a minimum number of characters. Even if you don't end up using the plugin, looking through the code will give you some ideas on how to implement it yourself.

Write your answer



176
votes

Answer

Solution:

Well, i also made a piece of code for limit high frequency ajax request cause by Keyup / Keydown. Check this out:

https://github.com/raincious/jQueue

Do your query like this:

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.

And bind event like this:

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



708
votes

Answer

Solution:

Saw this today a little late but just want to put this here in case someone else needed. just separate the function to make it reusable. the code below will wait 1/2 second after typing stop.

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

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



563
votes

Answer

Solution:

// 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);
}
Write your answer



Share solution ↓

Additional Information:
Link To Source
People are also looking for solutions of the problem: to enable extensions, verify that they are enabled in your .ini files

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Similar questions

Find the answer in similar questions on our website.

73 javascript - Prestashop: Delete user uploaded file via AJAX instead of reloading page
209 javascript - Prevent IE users from loading a webpage
184 javascript - AJAX wait until file exist on another server
829 php - Adding extra fields - Wordpress (wp_insert_user & update_user_meta doesn't work)
554 javascript - Server-Sent Events Polling causing long delays
284 html - php user form registration
822 javascript - How to show the data from database in a alert box as html table when td is double clicked
71 javascript - How to get address location from latitude and longitude in Google Map.?
118 php - Upload or move image into the folder through javascript
375 javascript - How to make a website prevent mobile from sleeping
948

Answer

Solution:

Delay Multi Function Calls using Labels

This is the solution i work with. It will delay the execution on ANY function you want. It can be the keydown search query, maybe the quick click on previous or next buttons ( that would otherwise send multiple request if quickly clicked continuously , and be not used after all). This uses a global object that stores each execution time, and compares it with the most current request.

So the result is that only that last click / action will actually be called, because those requests are stored in a queue, that after the X milliseconds is called if no other request with the same label exists in the queue!

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

You can set your own delay time ( its optional, defaults to 500ms). And send your function arguments in a "closure fashion".

For example if you want to call the bellow function:

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

To prevent multiple send_ajax requests, you delay them using:

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

Every request that uses the label "check date" will only be triggered if no other request is made in the 600 miliseconds timeframe. This argument is optional

Label independency (calling the same target function) but run both: 

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

Results in calling the same function but delay them independently because of their labels being different

851

Answer

Solution:

If someone like to delay the same function, and without external variable he can use the next script:

function MyFunction() {

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

        //Execute the function code here...

    }, 500);
}
133

Answer

Solution:

This function extends the function from Gaten's answer a bit in order to get the element back:

$.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/

64

Answer

Solution:

I'm surprised that nobody mention the problem with multiple input in CMS's very nice snipped.

Basically, you would have to define delay variable individually for each input. Otherwise if sb put text to first input and quickly jump to other input and start typing, callback for the first one WON'T be called!

See the code below I came with based on other answers:

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

This solution keeps setTimeout reference within input's delayTimer variable. It also passes reference of element to callback as fazzyx suggested.

Tested in IE6, 8(comp - 7), 8 and Opera 12.11.

118

Answer

Solution:

This worked for me where I delay the search logic operation and make a check if the value is same as entered in text field. If value is same then I go ahead and perform the operation for the data related to search value.

$('#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);
});
46

Answer

Solution:

Delay function to call up on every keyup. jQuery 1.7.1 or up required

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

Usage:$('#searchBox').keyupDelay( cb );

519

Answer

Solution:

From ES6, one can use arrow function syntax as well.

In this example, the code delayskeyup event for 400ms after users finish typeing before callingsearchFunc make a query request.

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

Updated Typescript version:

const delayKeyUp = (() => {
  let timer: NodeJS.Timeout;
  return (func: Function, ms: number) => {
    timer ? clearTimeout(timer) : null;
    timer = setTimeout(() => func(), ms);
  };
})();
372

Answer

Solution:

This is a solution along the lines of CMS's, but solves a few key issues for me:

  • Supports multiple inputs, delays can run concurrently.
  • Ignores key events that didn't changed the value (like Ctrl, Alt+Tab).
  • Solves a race condition (when the callback is executed and the value already changed).
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)
            }
        }
    }
}())

Usage:

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

The code is written in a style I enjoy, you may need to add a bunch of semicolons.

Things to keep in mind:

  • A unique id is generated based on the form id and input name, so they must be defined and unique, or you could adjust it to your situation.
  • delay returns an object that's easy to extend for your own needs.
  • The original element used for delay is bound to the callback, sothis works as expected (like in the example).
  • Empty value is ignored in the second validation.
  • Watch out for enqueue, it expects milliseconds first, I prefer that, but you may want to switch the parameters to matchsetTimeout.

The solution I use adds another level of complexity, allowing you to cancel execution, for example, but this is a good base to build on.

470

Answer

Solution:

Combining CMS answer with Miguel's one yields a robust solution allowing concurrent delays.

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

When you need to delay different actions independently, use the third argument.

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

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

Answer

Solution:

Building upon CMS's answer here's new delay method which preserves 'this' in its usage:

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

Usage:

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

Answer

Solution:

If you want to do something after a period of time and reset that timer after a specific event likekeyup, the best solution is made withclearTimeout andsetTimeout methods:

// declare the timeout variable out of the event listener or in the global scope
var timeout = null;

$(".some-class-or-selector-to-bind-event").keyup(function() {
    clearTimeout(timout); // this will clear the recursive unneccessary calls
    timeout = setTimeout(() => {
         // do something: send an ajax or call a function here
    }, 2000);
    // wait two seconds

});
105

Answer

Solution:

Use 

mytimeout = setTimeout( expression, timeout );

where expression is the script to run and timeout is the time to wait in milliseconds before it runs - this does NOT hault the script, but simply delays execution of that part until the timeout is done.

clearTimeout(mytimeout);

will reset/clear the timeout so it does not run the script in expression (like a cancel) as long as it has not yet been executed.

491

Answer

Solution:

Based on the answer of CMS, it just ignores the key events that doesn't change value. 

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


})
850

Answer

Solution:

User lodash javascript library and use _.debounce function

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

Answer

Solution:

Use the bindWithDelay jQuery plugin:

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

Answer

Solution:

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

Answer

Solution:

Here is a suggestion I have written that takes care of multiple input in your form.

This function gets the Object of the input field, put in your code

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

} // fieldKeyup

This is the actual delayCall function, takes care of multiple input fields

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

Usage:

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

Answer

Solution:

Take a look at the autocomplete plugin. I know that it allows you to specify a delay or a minimum number of characters. Even if you don't end up using the plugin, looking through the code will give you some ideas on how to implement it yourself.

176

Answer

Solution:

Well, i also made a piece of code for limit high frequency ajax request cause by Keyup / Keydown. Check this out:

https://github.com/raincious/jQueue

Do your query like this:

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.

And bind event like this:

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

Answer

Solution:

Saw this today a little late but just want to put this here in case someone else needed. just separate the function to make it reusable. the code below will wait 1/2 second after typing stop.

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

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

Answer

Solution:

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

People are also looking for solutions to the problem: php - Laravel - Localhost return array but server return object

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.