Как работать с ajax-вызовами асинхронно и отображать загрузчик до завершения?

#javascript #jquery #ajax #multithreading #loader

#javascript #jquery #ajax #многопоточность #загрузчик

Вопрос:

как я могу вызвать ajax-запрос или любую простую функцию в новом потоке?

Я знаю, async: false но мой код имеет такую структуру:

1. пользователь нажимает на какой-либо элемент, и это событие срабатывает
2.in событие, которое я вызываю этой функцией

 var myData= {};
$.ajax({
        type: "GET",
        url: "...",
        contentType: "application/json; charset=utf-8",
        async: false,
        cache: false,
        dataType: "json",
        success: function (s0) {
            myData.s0= s0;


            $.ajax({
                type: "GET",
                url: "sss",
                contentType: "application/json; charset=utf-8",
                async: false,
                cache: false,
                dataType: "json",
                success: function (s1) {
                    myData.s1 = s1;

                    $.ajax({
                        type: "GET",
                        url: "...",
                        contentType: "application/json; charset=utf-8",
                        async: false,
                        cache: false,
                        dataType: "json",
                        success: function (s2) {
                            myData.s2= s2;
                        }
                    });
                }
            });
        }
    });

    // I need call this function when all ajax are done.
    myFunc(myData);
 

Мой текущий код работает, но приводит к зависанию Сети до тех пор, пока данные не будут загружены, потому что у меня есть asyn: false , но я не знаю, как решить это асинхронно

Оптимальное решение для меня — вызвать это замораживание и отображать загружаемый gif до завершения.

Ответ №1:

Ну, нет никакого исправления для зависания пользовательского интерфейса во время синхронного AJAX, поэтому вы можете попробовать web workers, но у него есть свое предостережение.Я бы посоветовал вам использовать обещание jquery, чтобы вам не нужно было определять отдельные успешные обратные вызовы с ошибками.Обещание гарантированно будет выполнено, поэтому в конце цепочки либо у вас будут значения в myData, либо нет, но оно не зависнет навсегда

 //show loader
$.ajax({
        type: "GET",
        url: "...",
        contentType: "application/json; charset=utf-8",
        async: false,
        cache: false,
        dataType: "json",
}).then(function( s0, textStatus, jqXHR ){ 
         myData.s0= s0;
         return  $.ajax( {
         type: "GET",
         url: "sss",
         async: false,
         cache: false,
         dataType: "json"} );
 }).then(function( s1, textStatus, jqXHR ) { 
          myData.s1 = s1;
          $.ajax( {
          type: "GET",
          url: "...",
          async: false,
          cache: false,
          dataType: "json"});  
}).then(function( s2, textStatus, jqXHR ) {
          myData.s2= s2;
          //hide loader
})
 

Подробнее

Ответ №2:

Измените async:false async:true на при всех вызовах ajax показывать загрузочный gif в начале вашей функции, где вы инициализируете myData и вызываете функцию, которую хотите вызвать, когда все данные загружаются в функцию успеха при последнем вызове ajax (сразу после myData.s2 = s2 )