Проблема с JQuery / JavaScript - Модальное диалоговое окно

Question

ОК, это может быть глупый вопрос, так что простите меня заранее.У меня есть веб-страница (контент в основном неважный), на котором мне нужно сделать около 100 вызовов ajax синхронно (только потому, что я не знаю, как выполнять асинхронную / многопоточность в JavaScript, и потому что я не хочу забивать сервер, ям звоню).

Поскольку это займет некоторое время, я пытаюсь использовать диалоговое окно jQuery (http://jqueryui.com/demos/dialog/#option-modal), чтобы показать модальное диалоговое окно, чтобы пользователь знал, что это займет некоторое время. Моя функция выглядит следующим образом:

$("#modalDiv").dialog({ modal: true, title: "Calling server" });
for (var i = 0; i < callsToMake.length; i++) {
    // make a call
}

Проблема в том, что появляется модальное диалоговое окно, но не до тех пор, пока мои звонки не будут завершены, что бессмысленно. Чего мне не хватает? Заранее спасибо!

Answer 1

У меня была очень похожая проблема:

И в качестве общего решения это будет алгоритм:

showModal();
setTimeout(function() {
  doLongJob();
  removeModal();
}, 200);

Answer 2

Я сделал пример возможного решения, имитирующего вызовы ajax:

http://jsfiddle.net/px7fc/20/

По сути, вы должны создать аналогичный механизм, чтобы убедиться, что ваши звонки были сделаны через сервер и возвращены с вашей информацией. Затем вы обновляете свой пользовательский интерфейс с данными, которые вы получили, и проверяете свою коллекцию, чтобы увидеть, все ли звонки или нет были сделаны, и если они это сделают, вы просто закройте модальное ..

этот образец не велик, я просто сделал так, чтобы он работал .. но это просто, чтобы показать концепцию.

Answer 3

Синхронное выполнение запросов не снижает нагрузку на ваш сервер, оно просто делает браузер пользователя не отвечающим.Вам следует подумать о том, как я могу уменьшить количество вызовов на сервере до 1. Если вы не можете этого сделать, вам необходимо отслеживать, когда вызовы AJAX завершены.

Чтобы отслеживать, когда все вызовы завершены, выможет пойти об этом одним из двух способов.Недостаточно кода для создания примеров кода, поэтому приведено краткое описание того, что нужно сделать.

Самый простой / Хак Используйте событие ajaxStop .

Идея в том, что вы зацикливаетесь и выполняете все ваши вызовы ajax.Предполагая, что только эти звонки происходят в то время.В конце выполнения $.ajax 100 раз зарегистрируйте событие ajaxStop.Когда все события ajax завершены, будет выполнен этот обратный вызов.Затем вы можете закрыть диалоговое окно.

Правильный путь Узнайте об отложенном объекте.Я не буду притворяться, что это легко.

Вы создаете отложенный объект, который знает обо всех вызовах ajax.Когда они все завершены, вы можете запустить свой dialog.close().Я могу привести короткий пример, если этот метод вас заинтриговал.В противном случае используйте хак выше, который будет работать в простых случаях.

Answer 4

Одним из вариантов может быть принудительное выполнение ваших длительных вызовов после открытия диалога с помощью setTimeout ...

$("#modalDiv").dialog({ modal: true, title: "Calling server" });
setTimeout(function() {
  for (var i = 0; i < callsToMake.length; i++) {
    // make a call
  }
  $("#modalDiv").dialog("close"); //close the dialog
}, 500);