jQuery html function acting asynchronous instead of synchronous

Question

I am a bit bewildered. I have a function that calls an ajax search on keyup below.

$(document).on('keyup', '#search', function(e) {
        $("#showPending").html("");
        if ($('#showPending').is(':empty')){
            if ( this.value.length > 2  ) {

                var search = $("#search").val();
                loadsearch(search);
            }
        }
    });

Everything works great except if the user types a search parameter quickly he/she will get duplicate records appended to the #showPending table. If they type slowly they will get perfect results. I was under the impression the loadsearch function will not be called until after the #showpending element is empty because it is a synchronous function. Any ideas what I am doing wrong? Cheers! update: load search function (minimized) below:

function loadsearch(search){

    $("#showPending").html("");
    
    $.ajax({
    url: "server-calls/load-search.php?callback=?",
    type: "GET",
    data: {search: search},
    dataType: "jsonp",
    crossDomain: true,
    success: function (data, status) {
            for(var i = 0; i < data.length; i++) {
            var obj = data[i];
                
            $("#showPending").append('<a href="javascript:void(0);">SEARCH RESULTS </a>');
            }
        
        }                                   
    });     
}

You are removing the content of #showPending right before checking if empty. i.e. it will always be empty. I am not sure this resolves all your issues, but it is definitely not something you want to do. — Zoli Szabó
– Zoli Szabó, Commented Mar 21, 2021 at 18:01
Read up on how to "throttle" or "debounce" in js to account for faster typing and cut down on requests for every key stroke — charlietfl
– charlietfl, Commented Mar 21, 2021 at 18:04
@ZoliSzabó yeah, thats what I expected. I added that extra check to try to make sure the element is empty before ajaxing in more results. ie. I don't want duplicates — CJ Broersma
– CJ Broersma, Commented Mar 21, 2021 at 18:05

CertainPerformance · Accepted Answer · 2021-03-21 18:06:31Z

1

You can abort the previous XHR at the beginning of calling loadsearch, so that the prior request doesn't go to its success handler:

let request;
function loadsearch(search){
    request?.abort();
    $("#showPending").html("");
    
    request = $.ajax({
        // ...

You can also send out a request only after a certain amount of time has passed since the last input, maybe 500ms:

let timeout;
$(document).on('keyup', '#search', function (e) {
    $("#showPending").html("");
    if ($('#showPending').is(':empty')) {
        if (this.value.length > 2) {
            var search = $("#search").val();
            clearTimeout(timeout);
            timeout = setTimeout(() => loadsearch(search), 500);
        }
    }
});

For the best experience, I'd recommend using both approaches together.

answered Mar 21, 2021 at 18:06

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CJ Broersma Over a year ago

This works perfect! Thank you so much. Would I be correct in assuming that .html() is in fact asynchronous?? (and not synchronous as most stackoverflow users say?)

CertainPerformance Over a year ago

No, html is synchronous. The only async action here is the $.ajax

Collectives™ on Stack Overflow

jQuery html function acting asynchronous instead of synchronous

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related