Question

我有一个页面，用户可以通过xhr get请求单击按钮来检索数据。在加载和解析数据时，我希望显示一条加载消息，一旦准备好就会替换为数据。我正在使用dojo库，所以宁愿不包含jQuery或其他库。

这是我正在使用的设置的简化版本：

HTML

<div id = "clickMe"> Click Me! </div>
<div id = "results" class = "hidden">
    Please wait while we retrieve the results
</div>

CSS

.hidden {display: none;}

的Javascript

// Bind function to click me div
var clickMe = document.getElementById('clickMe');
clickMe.addEventListener('click', getResults, false);

function getResults () {
    // Display the loading message while results are retrieved
    var resultsDiv = document.getElementById('results');
    resultsDiv.classList.remove('hidden');

    // Get the data and parse it here using a standard dojo.xhrGet method
    var displayResults = getData();

    // Output data to resultsDiv, overwriting loading message
    resultsDiv.innerHTML = displayResults;
}

我遇到的问题是getResults函数总是等到getData函数完成后再删除'hidden'类并显示结果div。这意味着即使在处理数据时存在延迟，用户也永远不会看到加载消息，只看到检索到的数据。但是，如果我在中间放置警报，则强制暂停该功能，显示加载消息：

function getResults () {
    // Display the loading message while results are retrieved
    var resultsDiv = document.getElementById('results');
    resultsDiv.classList.remove('hidden');

    // The loading message will be displayed if this alert is included
    alert ("Hello world!");

    // Get the data and parse it here using a standard dojo.xhrGet method
    var displayResults = getData();

    // Output data to resultsDiv, overwriting loading message
    resultsDiv.innerHTML = displayResults;
}

我尝试用console.log替换警报，但它恢复为不显示加载消息。我还尝试将数据设置为显示加载消息的回调函数，但同样没有显示任何内容。我也尝试将get请求设置为sync：true以及sync：false，但再次没有运气。

如何在等待getData时确保显示加载消息？

编辑：

这是getData函数。无论有没有同步，我都试过了。

function getData() {
    var targetUrl = //some url;
    var restResponse;

    dojo.xhrGet({

        url: targetUrl,
        sync: true; // no difference when this is omitted

        load: function(result) {
            restResponse = result;
        }

    });

    // Parse the rest response - fairly long function so I won't paste it here
    var parsedResponse = parseResult(restResponse);

    return parsedResponse;
}

Answer 1

我的建议是学习如何编写异步代码和dojo / Deferred。

而不是getData，将方法重命名为loadData和

loadData: function() {
    return xhr('', {...}); // this returns a deferred
}

function getResults () {
    var resultsDiv = dom.byId('results');
    domClass.remove(resultsDiv, 'hidden');

    loadData().then(function(displayResults) {
        resultsDiv.innerHTML = displayResults;
    });        
}

http://dojotoolkit.org/reference-guide/1.9/dojo/Deferred.html

Answer 2

你可以在jQuery中使用deffereds和promises

http://www.bitstorm.org/weblog/2012-1/Deferred_and_promise_in_jQuery.html。如果您使用ajax请求，您可以像这样链接（从jQuery 1.8开始）。

var promise1 = $.ajax("/myServerScript1");

function getStuff() {
    return $.ajax("/myServerScript2");
}

promise1.then(getStuff).then(function(myServerScript2Data){
  // Both promises are resolved
});

如何强制javascript顺序执行

2 个答案: