如何调用“请稍候”仅当ajax的响应时间超过X毫秒时才显示窗口？ [英] How to invoke a "Please Wait" window only if ajax takes more than X milliseconds to respond?

问题描述

我正在做一个AJAX调用（普通JS），如果需要的时间超过500毫秒，我想提出我的Please Wait框。

I'm doing an AJAX call (regular JS) and, if it takes more than, say, 500 milliseconds, I'd like to put up my "Please Wait" box.

通常情况下，如果我想立即装上PW盒，我会这样做：

Normally, if I want to put up the PW box immediately, I'd do:

// show semi-transparent grey screen to block access to everything underneath
divGreyCoverAllNode.style.display = 'inline';
// show PW box. Prior to these lines, both coverall and PW were display=none
divPleaseWaitNode.style.display = 'inline';

// now do the AJAX and follow-up inside a zero timer; the timer is necessary to
// make the system pause to display the screen changes we previously invoked 

setTimeout( function() {
        // do my ajax call here, then after the call...
        // take down the PW stuff
        divPleaseWaitNode.style.display = 'none';
        divGreyCoverAllNode.style.display = 'none';
    },
    0
);

就像我上面所说的，我想要做的就是只有AJAX不会显示PW比如说，500毫秒就完成了。理想的情况是这样的：

Like I stated above, what I'd like to do is have the PW displayed only if AJAX doesn't finish in, say, 500 milliseconds. Ideally it would be something like:

// set a timer to display PW in 500 milliseconds
myTimeEvent = setTimeout( function() {
        divGreyCoverAllNode.style.display = 'inline';
        divPleaseWaitNode.style.display = 'inline';
    },
    500
);

// do my ajax call here, then after the call...
clearTimeout(myTimeEvent);
// take down the PW stuff, in case it was displayed
divPleaseWaitNode.style.display = 'none';
divGreyCoverAllNode.style.display = 'none';

但是我似乎无法让系统在AJAX采用它时暂停并显示PW时间。我已经尝试围绕AJAX和后续块在零计时器，但没有交易。

But I can't seem to get the system to pause and display the PW when AJAX is taking its time. I've tried surrounding the AJAX-and-follow-up block in a zero timer, but no deal.

有什么建议？

编辑：
重要的事实：这是不是异步ajax调用。这是一种不寻常的情况，需要一切等待ajax结果。

Important fact: This is not an asynch ajax call. It's an unusual situation that requires everything to wait on the ajax result.

推荐答案

鉴于您正在制作 / em> XHR电话，你不能。这就是同步–直到呼叫完成，一切停止。当您使用同步XHR请求时，不仅JavaScript事件循环停止，您实际上冻结了整个浏览器UI（在IE和Firefox中< 3）。

Given that you are making a synchronous XHR call, you can't. That's the nature of synchronous – everything stops until the call completes. When you use a synchronous XHR request, not only is the JavaScript event loop stopped, you actually freeze the entire browser UI (in IE and Firefox < 3).

说， 你做错了。 8.4％是由于同步XHR。 真的没有这样的东西是一种需要使用同步XHR请求的异常情况。发出你的请求，然后根据你在回调函数中得到的数据。

取而代之的是：

// Do stuff, then when you need a request:
var xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.send();
// Do more stuff
alert(xhr.responseText);

您需要：

You need:

// AJAX helper
function req(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) callback(xhr);
  }
}


// Your code.  Do stuff, then when you need an AJAX request:
req(url, function(xhr) {
  // Do more stuff
  alert(xhr.responseText);
});

很明显，这需要细化，但这说明了制作AJAX请求的正确方法。

Obviously this needs refined, but this illustrates the proper way to make an AJAX request.

这篇关于如何调用“请稍候”仅当ajax的响应时间超过X毫秒时才显示窗口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！