同步Ajax请求“锁定”浏览器

我有几个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('
'); var spinner = $('#loading-spinner'); spinner.css({ backgroundImage: 'url("img/loading.gif")', opacity: 0 }); spinner.show(); spinner.animate({ opacity: 1 }, 500); var dataForTab = requestData(input); // 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数据之前，一切都停止了。 我该如何解决这个问题？

Answer 1

这是同步请求的本质，它们是锁定的。 您可能希望尝试将请求移动到Web工作者 。 这是一个例子 （不使用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}); } }); } 

Answer 2

根据您的使用情况，您可以使用类似的东西

task.js简化的接口，用于获取在所有核心（node.js和web）上运行的CPU密集型代码

一个例子是

 // turn blocking pure function into a worker task const syncWorkerRequest = task.wrap(function (url) { // sync request logic }); // run task on a autoscaling worker pool syncWorkerRequest('./bla').then(result => { // do something with result }); 

你不应该这样做，除非你需要做一些繁重的数据处理，请使用异步请求。