FnDelay awaiting function

Once I wrote a very simple function that seemed to me a crutch in that I don’t remember which project. But she performed her duty well. Then I called it a waiting function, and JavaScript called it fnDelay. The fact is that in the application there can be a functional that works after changing a state. But this change occurs (or may hypothetically occur) so often that the functional will work many times, although in fact we only need to execute it for an already changed state (or for several more intermediate states). Otherwise there may be a sensitive issue in the performance of your application. Well, enough empty words, let's look at a specific example.

We have an asynchronous search, the text is entered by letter in the input field and the search results are automatically updated. At first glance - nothing complicated, let's hang up the keyup event on the input, when triggered, a new search will be performed on a new phrase.

document.getElementById('search').addEventListener('keyup', function() { //       search,   ,     search(); }); 

But while the request is being executed, the user may have time to type the next letter, then the results of the previous request will be irrelevant, and the new request will not be executed until the previous one ends (here I’ve heard that the XHR request can be canceled, but this is a special case). Imagine that a user enters quickly the phrase “Cheap tickets to Cambodia”. In this case, the search function will be called 25 times. This is unnecessary. On the other hand, if the user enters not so quickly, then it would be good to show him intermediate options, and it is still undesirable to have some delays before showing the results.
')
For this, the “Waiting Function” was originally invented. She waits for her cyclical call to stop, i.e. if the specified time elapses after its call, and this function will not be called again, it is executed, otherwise the action is passed to the next call.

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

And immediately show you how to use it.

 document.getElementById('search').addEventListener('keyup', function() { fnDelay(function() { search(); }, 200); }); 

The performance of this function is governed by the argument ms. For each particular case, you need to look for your golden mean, so that the result will be responsive and the queue of outstanding tasks will not accumulate. Now, if the user pauses at least 200 ms when entering, he will get new results. Thus, we significantly reduce the number of calls to the search function.

I didn’t stop at asynchronous search using the same function when I need to do something when resizing the page, since changing the window width by only 100 pixels, the resize event can be triggered dozens of times.

I will also add a link to a small Fiddle with an example .