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

HTML/CSS IT屋
百度翻译此文   有道翻译此文
问 题

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.

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

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';

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.

Any suggestions?

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

解决方案

Given that you are making a synchronous XHR call, you can't. That's the nature of synchronouseverything 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).

That said, you're doing it wrong. 8.4% of reported IE9 hangs last month were due to synchronous XHR. There really is no such thing as ‘an unusual situation that requires use of synchronous XHR requests.’ Make your request, then act on the data you get in the callback function.

Instead of something like:

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

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

本文地址:IT屋 » How to invoke a &quot;Please Wait&quot; window only if ajax takes more than X milliseconds to respond?

问 题

我正在做一个AJAX调用(普通JS),如果需要的时间超过500毫秒,我想提出我的“Please Wait”框。



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

  //显示半透明灰色屏幕以阻止访问
下的所有内容divGreyCoverAllNode.style.display ='inline';
//显示密码框。在这些行之前,套装和PW都是display = none
divPleaseWaitNode.style.display ='inline';

//现在执行AJAX并在零定时器内执行后续操作;定时器对于
是必需的//让系统暂停以显示我们先前调用的屏幕更改

setTimeout(function(){
//在此处执行ajax调用,然后在呼叫后...
//取下PW的东西
divPleaseWaitNode.style.display ='none';
divGreyCoverAllNode.style.display ='none';
} ,
0
);


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

  //设置一个计时器以500毫秒显示PW 
myTimeEvent = setTimeout( function(){
divGreyCoverAllNode.style.display ='inline';
divPleaseWaitNode.style.display ='inline';
},
500
);

//在这里调用ajax调用,然后调用...
clearTimeout(myTimeEvent);
//取下PW的内容,以防万一显示
divPleaseWaitNode.style.display ='none';
divGreyCoverAllNode.style.display ='none';


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



有什么建议?



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


解决方案

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



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



取而代之的是:



  //做东西,然后当您需要请求时:
var xhr = new XMLHttpRequest();
xhr.open('GET',url,false);
xhr.send();
//做更多的事情
alert(xhr.responseText);


您需要:

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


//您的代码。做东西,然后当你需要一个AJAX请求时:
req(url,function(xhr){
//做更多的事情
alert(xhr.responseText);
}) ;


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


本文地址:IT屋 » 如何调用“请稍候”仅当ajax的响应时间超过X毫秒时才显示窗口?

官方微信
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ,选择关注
与百万开发者在一起
}