Question

I’m currently doing a highlighting function on a webpage and im using the jquery plugin for that. My code looks like this:

var input = function() {         
    var matchword = $('#searchbox').val();
    if(matchword != "") {
        $('body').removeHighlight();
        $('body').highlight($('#searchbox').val());
    }
}

$(document).ready(function() {
    $('#searchbox').keyup(function() {
        setTimeout("input()", 2000);    
    });
});

It works fine if there is not so large amount of data on the page. But in case of large amount of data on the page the whole process is slowing down which causes that inputbox is freezing untill the letter is hightlighted. So the typing is not smooth. I tryed to use a setTimeout but it seems doesnt help. Any ideas?

Answer 1

In the sample that you have provided, the setTimeout is only delaying the execution of the function, but the number of executions is still the same. What you need to do is, refresh the timeout each time the user types a character, so the input() function does not fire each time:

var timer;

$('#searchbox').keyup(function() {
  clearTimeout(timer);
  timer = setTimeout(input, 2000);
});