javascript jquery ajax同步调用beforeSend

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4971062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 15:31:16  来源:igfitidea点击:

jquery ajax synchronous call beforeSend

javascriptjqueryajax

提问by Daniel

I have a function called:

我有一个函数叫:

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 
     }
   }
  );
}

In the code, I call "callAjax" X number of times and I want to update the data synchronously. It is done as expected, but one problem: the loading item doesn't show in beforeSend function. If I turn async to true, it works but the updates aren't synchronously done.

在代码中,我调用了 X 次“callAjax”,我想同步更新数据。它按预期完成,但有一个问题:加载项未显示在 beforeSend 函数中。如果我将 async 设置为 true,它会起作用,但不会同步完成更新。

I've tried several things with no success. I tried putting the loading indicator before the ajax call like this:

我尝试了几件事,但没有成功。我尝试在 ajax 调用之前放置加载指示器,如下所示:

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

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

But for some reason it doesn't want to show the loading indicator. I notice a strange behavior when I put an "alert" in the beforeSend and the loading indicator appears in that case, but I rather not pop up a message box.

但出于某种原因,它不想显示加载指示器。当我在 beforeSend 中放置“警报”并且在这种情况下出现加载指示器时,我注意到一种奇怪的行为,但我宁愿不弹出消息框。

Got any ideas?

有什么想法吗?

回答by Pointy

Making a synchronous call like that is like putting up an "alert()" box. Some browsers stop what they're doing, completely, until the HTTP response is received.

进行这样的同步调用就像放置一个“alert()”框。一些浏览器会完全停止正在执行的操作,直到收到 HTTP 响应。

Thus in your code, after your call to the "$.ajax()" function begins, nothinghappens until the response is received, and the next thing as far as your code goes will be the "success" handler.

因此,在您的代码中,在您开始调用“$.ajax()”函数之后,在收到响应之前什么也不会发生,并且就您的代码而言,接下来的事情将是“成功”处理程序。

Generally, unless you're reallyconfident in your server, it's a much better idea to use asynchronous calls. When you do it that way, the browser immediately returns to its work and simply listens in the background for the HTTP response. When the response arrives, your success handler will be invoked.

通常,除非您对自己的服务器非常有信心,否则最好使用异步调用。当您这样做时,浏览器会立即返回其工作,并在后台简单地侦听 HTTP 响应。当响应到达时,您的成功处理程序将被调用。

回答by Amjad Masad

When you do the blocking I/O the program is halted until the the input is received, in JS words when doing a synchronous call, the program halts and browser window freezes (no painting can be done) until the response is received. In most cases doing syncronus calls and any kind of blocking I/O can be avoided. However imagine your doing a progress bar in java or any other programming language, you have to spawn a different thread to control the progress bar, I think.

当您执行阻塞 I/O 时,程序会暂停,直到接收到输入,用 JS 的话来说,在进行同步调用时,程序会暂停并且浏览器窗口会冻结(无法绘制),直到收到响应。在大多数情况下,可以避免进行同步调用和任何类型的阻塞 I/O。然而,想象一下你用 java 或任何其他编程语言做一个进度条,你必须产生一个不同的线程来控制进度条,我想。

One thing to try in your case, is to call the ajax call after a time delay

在您的情况下尝试的一件事是在一段时间延迟后调用 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 );

EDITajaxcall in setTimeout, Example

在 setTimeout 中编辑ajaxcall,示例

回答by dubRun

This is what you are looking for - .ajaxStart()

这就是你要找的 - .ajaxStart()

It will be triggered when any ajax event starts

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

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

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

They even give a specific example similar to what you are trying to accomplish:

他们甚至给出了一个与您要完成的任务类似的具体示例:

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

You can then use the .ajaxStop() function

然后您可以使用 .ajaxStop() 函数

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