Question

我正在进行AJAX调用（常规JS），如果花费超过500毫秒，我想把我的“请等待”框。

通常，如果我想立即打开PW盒，我会这样做：

// 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毫秒。理想情况下它会是这样的：

// 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和后续块，但没有交易。

有什么建议吗？

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

Answer 1

鉴于您正在进行同步 XHR呼叫，您不能。这是同步的性质 - 一切在呼叫完成之前停止。当您使用同步XHR请求时，不仅JavaScript事件循环停止，您实际上冻结整个浏览器UI（在IE和Firefox＆lt; 3中）。

据说，上个月报告的IE9挂起的you're doing it wrong 。 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);

你需要：

// 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请求的正确方法。

Answer 2

它不应该在ajax调用之后，它应该进入回调函数。 AJAX请求与其余代码是异步的，您应该在请求的回调部分内完成所需的操作。

Answer 3

看看BlockUi。如果这看起来不适合您，您可以尝试使用

$(document).ajaxStop(DoSomething());

Answer 4

查看jQuery Timeout

如果ajax响应时间超过X毫秒，如何调用“Please Wait”窗口？

4 个答案: