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秒延迟。任何人都可以告诉我如何使代码工作，因为我需要？

我的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>

function 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

jQuery承诺的.fail()和.always()方法也可能对您有用Deferred的完整文档http://api.jquery.com/jQuery.Deferred/

在投影对话框之前无法显示微调器

1 个答案: