Ajax request stop all the website during the working time

Question

I have an issue about a big ajax request: I make a query on a php files which make some curl request, it takes 15-20 seconds to complete, then return some json on my webpage. It's a classic ajax request, but I discovered a strange bug,

When the ajax query is running (type GET), I can't use my website in Chrome, all the pages stay blank until the ajax request is completed,

So I thought the ajax request broken my server, but the site perfectly works on other devices (mobile, other chrome session, ...). It's only the current chrome session which become laggy and work only when the ajax request is completed.

Could you please explain me why? My ajax request is basic:

                    $.ajax({
        url: '/controller.php',
        type: 'GET',
        dataType: "json",
        data: {
            action: "loadPageContent"
        },
        success: function(retour) {
            localStorage.removeItem('myhtml');
            if(retour.status && retour.htmlDatas){
                storedDatas["posts"] = retour.htmlDatas;                        
                storedDatas["date_scrapping"] = retour.date_scrapping;                      
                localStorage.setItem("myhtml", JSON.stringify(storedDatas) ); // ¨Pour si relance

                $('#container').html(retour.htmlDatas);
                

            }
            else {
                alert('error');
            }

        },
        error: function(retour) {
            alert('error');
        },  
    });

Answer 1

use promise and handle the response:

async function runCodes(){

    //this code its gonna run async
    ajaxCall().then((response)=>{
       if(response){
          //true
       } else {
          //false
       }
    });

    //some other codes

}
    
    function ajaxCall(){
      return new Promise((resolve) => {
        $.ajax({
            url: '/controller.php',
            type: 'GET',
            dataType: "json",
            data: {
                action: "loadPageContent"
            },
            success: function(retour) {
                localStorage.removeItem('myhtml');
                if(retour.status && retour.htmlDatas){
                    storedDatas["posts"] = retour.htmlDatas;                        
                    storedDatas["date_scrapping"] = retour.date_scrapping;                      
                    localStorage.setItem("myhtml", JSON.stringify(storedDatas) ); // ¨Pour si relance
    
                    $('#container').html(retour.htmlDatas);
                    resolve(true);
    
                }
                else {
                    alert('error');
                    resolve(false);
                }
    
            },
            error: function(retour) {
                alert('error');
                resolve(false);
            },  
        });
      });
    }