Как вызвать окно «Пожалуйста, подождите», только если ajax требует более X миллисекунд для ответа?

Question

Я делаю AJAX-вызов (обычный JS) и, если это займет, скажем, более 500 миллисекунд, я бы хотел выставить окно «Please Wait».

Обычно, еслиЯ хочу немедленно установить окно 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
);

Как я уже говорил выше, я хотел бы, чтобы PW отображался только в том случае, если AJAX не заканчивается,скажем, 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';

Но я не могу заставить систему приостановить работу и отобразить PW, когда AJAX тратит время.Я пытался окружить блок AJAX и последующего контроля с нулевым таймером, но без сделки.

Есть предложения?

РЕДАКТИРОВАТЬ: Важный факт: это не асинхронный вызов ajax.Это необычная ситуация, требующая все, чтобы ждать результата ajax.

Answer 1

Учитывая, что вы делаете синхронный XHR вызов, вы не можете.Таково синхронное - все останавливается до завершения вызова.Когда вы используете синхронный XHR-запрос, цикл событий JavaScript не только останавливается, вы фактически замораживаете весь пользовательский интерфейс браузера (в IE и Firefox <3). </p>

При этом you 'делали это неправильно . 8,4% сообщений о зависаниях IE9 в прошлом месяце произошли из-за синхронного 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

взгляните на BlockUi . Если это не похоже на то, что это сработает, вы можете попробовать использовать

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

Answer 3

Взгляните на JQuery Timeout

Answer 4

Он не должен приходить после вызова ajax, он должен входить в функцию обратного вызова. AJAX-запросы асинхронны с остальной частью кода, вы должны предварительно выполнить необходимые действия после завершения внутри части обратного вызова вашего запроса.