在（同步）Ajax 期间停止浏览器锁定？答案

【问题标题】：Stop browser locking during (synchronous) Ajax?在（同步）Ajax 期间停止浏览器锁定？
【发布时间】：2012-03-18 02:22:45
【问题描述】：

我想要做的是将加载图像附加到 div（这样用户就知道正在加载），然后我调用一个 jquery ajax 函数，该函数设置为“async：false”。这是我的代码：

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
         type: "POST", /* this goesn't work with GET */
         url: urlValue, /*ex: "NBAgetGamesList.php" */
         data: parameters, /*ex: "param1=hello" */
         cache: false,
         async: false,
                     success: function(data){

                     }
});

问题是浏览器锁定并且不会附加加载图像，直到完成 ajax 调用之后，这当然是无用的。 Firefox 是唯一实际附加加载图像的浏览器。 IE、Chrome 和 Safari 不附加加载图像。

我知道会发生浏览器锁定是因为 async 设置为 false，但这是我唯一的选择，因为我需要等待此请求完成才能继续，因为我需要返回的数据。

有没有办法解决这个问题？如果我在添加有效的加载图像之后发出警报，但我不希望每次都弹出警报。

【问题讨论】：

同步，顾名思义，就是“阻塞”。它对浏览器的影响各不相同，但通常会阻止 DOM 更新和交互。使其异步“修复”问题。
为什么不让它异步，然后把代码放在一个单独的函数中运行。然后调用返回码中的函数？
"因为我需要返回的数据。"这就是回调的用途。您的代码不必是线性的。
@Bob 在这之后放了什么代码？ Epacscarello，有一个回调函数。在这种情况下，它确实需要是线性的，因为我正在等待数据，然后我在下一个代码块中使用该数据。
@Ray - 他们在说什么（如我的回答所示）是您可以将整个下一个代码块移动到成功回调中，或者将其放入您调用的单独函数中从成功回调中，然后该块可以使用返回的数据。

标签： javascript jquery ajax synchronous

【解决方案1】：

尽管您的断言相反，但您不需要它是同步的。无论您需要在响应中/之后做什么，都可以在成功（和/或错误或完成）回调中完成。所以改变：

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
   ...
   async: false,
   ...
});
// OTHER CODE

变成这样：

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
   ...
   async: true,
   success: function(data) {
      // OTHER CODE
   }
});

或将“其他代码”移动到您从成功回调调用的单独函数中。

如果您需要比这更复杂的东西，您可以将上述内容封装在一个函数中并传递一个回调给它：

function doAjaxStuff(callback) {
    $jQuery("#playersListDiv").html(loadingImage);    
    $jQuery.ajax({
       ...
       async: true,
       success: function(data) {
          // optional other processing here, then:
          callback(data);
       }
    });
}

// then from somewhere else in your code:
doAjaxStuff(function(data) {
   // do something with data
});

【讨论】：

这正是我已经拥有的。成功/回调函数。浏览器被锁定，直到回调函数完成。
它不是您已经拥有的：将您的代码更改为async:true（或完全省略该参数，它应该默认为async : true）。
对不起，我不清楚。我最初尝试了“async：true”，但代码甚至根本不起作用。这就是我一开始做假的原因。我的目标是想办法让它与“async: false”一起工作。
你不能。 async:false 将锁定浏览器，无论您是否设法让图像首先显示。（尽管如果您不关心浏览器是否被锁定，只要显示图像，您就可以在调用函数之前设置图像，然后直接使用 setTimeout(yourFunction, 5); 而不是直接调用函数 - 浏览器可能会在之前显示图像启动你的函数。但我真的不建议这样做。重组代码以处理异步请求要好得多。
好的，感谢您的帮助，稍后我将重新构建我的代码。我认为会有一个简单的方法来解决它。

【解决方案2】：

你想要的是jQuery.Deferred()。

【讨论】：

【解决方案3】：

我遇到了这个问题，并找到了解决方案。
认为！您确实需要在您的ajax request 中使用async : false，并且您希望在执行ajax 请求时显示加载图像。但是由于async : false，ajax 请求正在停止其他 UI 操作（显示加载图像）。所以，简单的解决方案，使用fadeIn显示加载图像，使用fadeOut隐藏加载图像。

这是一个 jsFiddle 演示，其中包含一个带有 async : false 的 ajax 请求。因此，加载图像不显示。（我使用show 方法显示加载图像。）。

这是另一个jsFiddle，带有淡入淡出效果。无论ajax 请求中的async : false 如何，它都会显示加载图像。

【讨论】：