我有几个 jQuery Ajax 请求,它们必须是同步的,但它们会一直锁定/卡住浏览器,直到收到响应。我的主要问题是,在收到响应之前,我必须显示一个旋转图标,但由于卡住,旋转器不会显示,即使奇迹般地它也不会显示动画。
这是显示微调器并发送请求的事件:
$(document).on('click', '#open-button', function () {
var input = "some text";
var wrapper = $('#wrapperWindow');
wrapper.children().animate({
opacity: 0
}, 500);
wrapper.children().remove();
wrapper.append('<div id="loading-spinner" style="display:none;"></div>');
var spinner = $('#loading-spinner');
spinner.css({
backgroundImage: 'url("img/loading.gif")',
opacity: 0
});
spinner.show();
spinner.animate({
opacity: 1
}, 500);
var dataForTab = requestData(input); //<-- the request
if (dataForTab.length > 0) {
//do stuff
}
});
请求:
function requestData(input) {
var result = null;
$.ajax({
async: false,
type: "POST",
url: "/some/url?input=" + input,
dataType: "json",
retryLimit: 3,
success: function (json) {
result = json;
},
error: function (xhr, err) {
console.log(xhr);
console.log(err);
}
});
return result;
}
在请求返回接收到的 JSON 数据之前,一切都会停止移动。请问我该如何解决这个问题?
最佳答案
这就是同步请求的本质,它们是锁定。您可能想尝试将请求移至 web worker 。这是 example (没有使用XHR,但它可以给你一个实现思路)
Web Worker 在单独的文件中实现,脚本可能如下所示:
onmessage = function (e) {
var result = null;
$.ajax({
async: false,
type: "POST",
url: "/some/url?input=" + input,
dataType: "json",
retryLimit: 3,
success: function (json) {
result = json;
postMessage({result: result});
},
error: function (xhr, err) {
postMessage({error: err});
}
});
}
关于javascript - 浏览器同步Ajax请求 "lock",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26503620/