У меня есть запрос ajex с ".done ()" и я его вызываю несколько раз, и хочу убедиться, что процесс в done () обработан по порядку. Не уверен, сколько времени займет процесс в done (). Это может быть 0,1 se c или 0,5 se c.
Простой пример: допустим, у меня есть кнопка reuqest и я нажимаю ее 5 раз. Он отправит 1-5 номер на сервер, чтобы затем повторить его. В done () есть sleep () для имитации задержки. Есть ли способ отобразить 1-5 по порядку в результате?
<button id="test">Request</button>
var counter = 0;
$(function(){
$('#test').on('click',function(){
counter++;
$.ajax({
url: 'echo.php', // Simply echo back argument (counter value)
type: 'POST',
data: {"counter":counter}
}).done(function(data){
// Simulate delay
let waitsec = Math.floor(Math.random()*(3-1)+1);
sleep(waitsec, function() {
console.log(data); // show 1-5
});
});
});
});
function sleep(waitSec, callback) {
var spanedSec = 0;
var waitFunc = function () {
spanedSec++;
if (spanedSec >= waitSec) {
if (callback) callback();
return;
}
clearTimeout(id);
id = setTimeout(waitFunc, 1000);
};
var id = setTimeout(waitFunc, 1000);
}
Отредактировано: Основано на рекомендациях Афонсу. Я изменил код. Теперь он сохраняет параметры запроса в массиве и запускается один за другим после выполнения. Это все еще не работает должным образом. Что не так с моим кодом?
var counter = 0;
var jqxhr;
var jqxhr_requests = [];
$(function(){
$('#test').on('click',function(){
counter++;
console.log("c: "+counter)
let request = {
url: 'echo.php', // Simply echo back argument (counter value)
type: 'POST',
data: {"counter":counter},
};
if(jqxhr_requests.length <= 0) // Run first request
{
jqxhr_requests.push(request);
jqxhr = $.ajax(jqxhr_requests[0]);
}
else
{
jqxhr_requests.push(request);
}
jqxhr.done(function(data) {
// Simulate delay
let waitsec = Math.floor(Math.random()*(3-1)+1);
sleep(waitsec, function() {
console.log(data);
});
jqxhr_requests.shift();
jqxhr = $.ajax(jqxhr_requests[0]);
});
});
});