Javascript: setTimeout () - need help

Question

I am currently performing the highlight function on a web page, and I am using the jquery plugin for it. My code is as follows:

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 great if there is not much data on the page. But in the case of a large amount of data on the page, the whole process slows down, which leads to the fact that the input tray freezes until the letter is highlighted. Thus, typing is not smooth. I tried using setTimeout but it doesn't seem to help. Any ideas?

Answer 1

In the example you provided, setTimeout only delays the execution of the function, but the number of executions remains unchanged. What you need to do is update the timeout every time the user types a character, so the input () function does not work every time:

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

Answer 2

Please do not pass the setTimeout string, in this case there is no need, you can call the function directly as follows:

 $(function() { $('#searchbox').keyup(function() { if($(this).data("timeout")) clearTimeout($(this).data("timeout")); $(this).data("timeout", setTimeout(input, 2000)); }); }); 

As with the queue queuing problem, you just need to clear the previous timeout (2 to 2 seconds ago), as before. In addition, you can save this timeout locally in the element using .data() , as it was above, fewer global variables, and you can use this in many elements instead of the timeout variable for each.

Answer 3

You can use the jQuery throttle plugin - this is a speed limiter.

jQuery is not really required for this plugin because nothing internal uses any jQuery methods or properties. jQuery is simply used as a namespace under which these methods can exist.

From here

jQuery throttle / debounce allows you to restrict your functions in a few useful ways. Passing the delay and callback to $ .throttle returns a new function that will no longer be executed than once every millisecond. Passing delay and callback $ .debounce returns a new function that will be executed only once, combining several consecutive calls into a single execution, beginning or end.

Answer 4

The timeout does not help now, since you simply delay the execution of all keyup events for 2000 milliseconds - it will close the browser after 2 seconds. I assume that you want when the last keyup event was 2000 milliseconds, run the input function. This can be done as follows:

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

When you clear the previous timeout with clearTimeout , the input function is called only once when recording stops. Ergo, text is highlighted when the user pauses recording for 2 seconds.

Answer 5

Consider using focus and blur listeners with the setInterval function, rather than a key listener. In the following example, I only call the input method when I change the value of the search query. This will allow me to avoid unnecessary calls for the input method [for example, pressing the user change key].

 $(document).ready(function() { var highlightInterval; var previousValue = $('#searchbox').val(); $('#searchbox').focus(function() { if(highlightInterval) { window.clearInterval(highlightInterval); } highlightInterval = window.setInterval(function(){ if(previousValue != $('#searchbox').val()){ previousValue = $('#searchbox').val(); input(); } }, 2000); }); $('#searchbox').blur(function(){ window.clearInterval(highlightInterval); }); }); 

Answer 6

I understand that the highlighting method looks for all the possibilities of $('#searchbox').val() , and then it surrounds it with some kind of highlighting style. Please correct me if I am wrong!

I think you can make it faster by wrapping each selection inside setTimeout, e.g.

 function wrapIntoHighligh(something){ ... } for(var i = 0; i < occurrences.length; i++){ setTimeout("wrapIntoHighligh(something)", 1); } 

It may not be a cleaner solution ... but it will make each backlight go out of the loop, it will go back into the JS stack and hopefully it will not block everything.