Question

I have a <div> that has a list of items being load()ed into it containing a keyword typed in a text input triggered by keyup(). When I also run a jquery plugin that highlights that keyword in the respective search items on keyup() it slows the page WAY down and can even crash my browser.

So I’m wondering if there is a way that I can only trigger this highlighting function after a person hasn’t typed any characters in a second or two and THEN trigger the highlighter. Or is there maybe some way I can keep it at the end of the queue so that it always triggers last?

thx

Answer 1

You want to use setTimeout to delay the call to highlight, and clearTimeout if a new keystroke is received before that one second has passed:

var timeout;

$('#my-input').keyup(function() {

    // clear previous timeout if there was one
    window.clearTimeout(timeout);

    // set new one
    timeout = setTimeout(function() {

        // make your highlight call here

    }, 1000);

});