Невозможно отобразить прядильщик перед диалоговым окном проецирования

Question

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

var $loading = $('#loadingDiv'); 
    $loading.show(); 
    console.log("spinner displayed in build"); 
    loadBuildsList(); // Just to give 6 seconds delay 
    $("#buildSelectionDialog").dialog("open"); // display dialog 
    console.log("spinner hidden in build"); 
    //$loading.hide() 

Теперь проблема, с которой я столкнулся, заключается в том, что на экране перед диалоговым окном должен появиться загрузочный div. Но на самом деле одновременно появляются диалоговое окно и прядильщик. Во время отладки в браузере, если я введу точку прерывания в строке loadBuildsList();, показания счетчика покажутся перед диалоговым окном, и если я позволю коду работать без каких-либо точек останова, оба они появляются одновременно. Вышеупомянутая проблема напечатайте spinner displayed in build в консоли, останавливается в течение 6 секунд, а затем печатает spinner hidden in build. Но одновременно отображается как прядильщик, так и диалоговое окно. Я использую запрос ajax для запуска 6-секундной задержки. Может кто-нибудь рассказать, как я могу заставить код работать так, как мне нужно?

My loadingDiv выглядит следующим образом.

<div id="loadingDiv" style="top:30%; left:30%; position:fixed; width:200px; height:200px; z-index:9999999999; display:None"> 
<img width=150px height=150px src="ajax_loader.gif"/> 
<p>This may take few seconds</p></div> 

функция loadBuildsList выглядит, как показано ниже

function loadBuildsList() { 
$.ajax({ 
async:false, 
url:"ajax_test.php" 
}); 
} 

Answer 1

Вместо того, чтобы сделать запрос AJAX синхронные, чтобы все произошло в порядке jQuery.ajax возвращает обещание, чтобы мы могли вернуться, что с loadBuildsLists, чтобы позволить нам обращаться вещи в правильном порядке, сохраняя при этом запрос AJAX асинхронным.

function loadBuildsList() { 
     return $.ajax({ 
     url:"ajax_test.php" 
     }); 
    } 

Тогда, если мы немного изменим код можно добавить функцию обратного вызова из-за пределов loadBuildsList что должно позволить вещам происходить в правильном порядке:

var $loading = $('#loadingDiv'); 
    $loading.show(); 
    console.log("spinner displayed in build"); 
    loadBuildsList() 
     .done(function(data){ // As a promise is returned we can add a callback via the "done" method. 
      $("#buildSelectionDialog").dialog("open"); 
      console.log("spinner hidden in build"); 
      //$loading.hide() 
     }); // Just to give 6 seconds delay 

.fail() и .always() методы Предложение jQuery также может представлять интерес для вас полная документация для Deferred доступна здесь http://api.jquery.com/jQuery.Deferred/