#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
)