php - Javascript: why is my instant search function running lagging, how to improve?

Answer

Solution:

I'd suggest absolutely not searching directly on key-up. That's incredibly inefficient and very resource intense. I'd suggest setting a timer for say, one second. Then, on key-up, you refresh that timer to one second. If it ever reaches 0, then you search. Something like this:

timer = 1000;
started = false;

$("input[type=text]").keyup( function(){
    window.timer = 1000;

    if(window.started == false) queueTimer();
    window.started = true;
});

function queueTimer(){
    if(window.timer <= 0){
        //Timer has run out, business logic here!
        searchq();
        window.started = false;
    } else {
        window.timer -= 100;

        setTimeout(queueTimer, 100);
    }
}
Copy code

Set the timer to whatever you want, in milliseconds. I recommend one second, but you can lower it as you see fit.

Check the fiddle here:

https://jsfiddle.net/kbyy2m6u/

What the code is doing

Right off the bat, we set our timer to 1000 milliseconds andstarted tofalse.

Thekeyup inline-function is resetting the timer to 1000 milliseconds, queues the timer, and setsstarted totrue. We set it totrue so thequeueTimer() function does not get queued multiple times (which would negate the entire point of queueing instant searches). Once it's set totrue, it will not runqueueTimer() until the timer runs out and a search is actually conducted.

queueTimer() is the bread and butter here. If the timer has not run out yet, it will simply decrease thetimer variable by 100 milliseconds, and call itself to be ran again in 100 milliseconds (looping until the timer runs out). Once it runs out, it executes yoursearchq() and setsstarted tofalse again so the instant search can run once more.

In plain English, every time someone types in a search box it will wait one second before doing an instant-search. The timer will reset on key-up, even after the queue is started, so that while typing a person will not be searching. This prevents multiple erroneous searches by making sure a user has paused for a bit to actually conduct a search.

Now a word of caution

Google is a giant - they make magical things happen on the web. Things like an instant search are great in theory, but for those of us who aren't able to throw billions of dollars at R&D like Google, it's something that's not typically worth the headache.

Every single call you make to the database is taxing. If you've got other functionality on your web application that hits the DB and now you're adding an instant search, be prepared for some pretty interesting side-effects. They may even be unforeseen side effects on totally separate databases due to data locks on your MySQL Engine. This is one reason why Data Locking is so prevalent in a lot of Magento installs.

I'm sure you know what you're doing, but I want to make sure anyone who sees this question will realize the trade-off to something like instant search.

Answer

Solution:

You should consider two things: debounce your calls and abort any previous ajax requests.

For the first one, there are lots of information on debounce/throttle techniques. Basically you have to assure that you do not execute more than one function call (searchq) in a certain period of time. Thus, if the user typesabc, it won't trigger 3 different searches fora,ab andabc. Instead, it will trigger a single search for the whole result (abc).

Another thing you should consider is aborting unresolved ajax calls.
Since you're relying on ajax calls to show results, and since ajax calls are... well... asynchronous, you shouldn't actually have multiple simultaneous ajax calls. Take the following example:

1. the user typesab
2. thesearchq function is executed for the first character (a)
3. thesearchq function is executed for the new sequence (ab)
4. the ajax promise for the second call gets resolved
5. the ajax promise for the first call gets resolved
6. the user sees the result for the wrong input

To avoid this issue, you should abort - or ignore at least - any other ajax call that is in progress by the time you fire a new one.