Question

我有一个叫做的函数：

function callAjax(url, data) {
 $.ajax(
   {
     url: url, // same domain
     data: data,
     cache: false,
     async: false, // use sync results
     beforeSend: function() {
       // show loading indicator
     },
     success: function() {
       // remove loading indicator 
     }
   }
  );
}

在代码中，我多次调用“callAjax”X次，我想同步更新数据。它按预期完成，但有一个问题：loading项目没有显示在beforeSend函数中。如果我将async变为true，它可以正常工作，但更新不会同步完成。

我尝试了几件事但没有成功。我尝试在ajax调用之前加载加载指示符，如下所示：

function callAjax(url, data) {
  // show loading div

  $.ajax(
    {
      // same as above
    }
   );
}

但由于某种原因，它不想显示加载指标。当我在beforeSend中输入“alert”并且在那种情况下出现加载指示符时，我注意到一种奇怪的行为，但我宁愿不弹出消息框。

有什么想法吗？

Answer 1

像这样进行同步通话就像放了一个“alert（）”框。有些浏览器完全停止了他们正在做的事情，直到收到HTTP响应。

因此，在您的代码中，在您调用“$ .ajax（）”函数开始后，没有发生，直到收到响应，并且代码的下一个内容将是“成功”处理程序。

通常，除非您对服务器确实有信心，否则使用异步调用会更好。当你这样做时，浏览器立即返回其工作，只是在后台监听HTTP响应。当响应到达时，将调用您的成功处理程序。

Answer 2

当您执行阻塞I / O时，程序将停止，直到收到输入为止，在执行同步调用时，JS语言中，程序停止并且浏览器窗口冻结（无法进行绘制），直到收到响应为止。在大多数情况下，可以避免执行syncronus调用和任何类型的阻塞I / O.但是想象一下你在java或任何其他编程语言中做进度条，你必须产生一个不同的线程来控制进度条，我想。

在您的情况下尝试的一件事是在延迟一段时间后调用ajax调用

//loading div stuff, 
//if your doing some animation here make sure to have Sufficient 
//time for it. If its just a regular show then use a time delay of 100-200
setTimeout( ajaxCall, 500 );

在setTimeout中{p> 编辑 ajaxcall，Example

Answer 3

这就是你要找的东西 - .ajaxStart（）

任何ajax事件开始时都会触发

http://api.jquery.com/ajaxStart/

他们甚至给出了一个类似于你想要完成的具体例子：

 $("#loading").ajaxStart(function(){
   $(this).show();
 });

然后您可以使用.ajaxStop（）函数

$("#loading").ajaxStop(function(){
      $(this).hide();
});

jquery ajax同步调用beforeSend

3 个答案: