0

我有一个页面，用户可以单击按钮通过 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 函数完成，然后再删除“隐藏”类并显示结果 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 替换警报，但它恢复为不显示加载消息。我还尝试将获取数据设置为显示加载消息中的回调函数，但它再次没有显示任何内容。我也尝试将获取请求设置为同步：真以及同步：假，但同样没有运气。

如何确保在等待 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;
}
4

2 回答 2

1

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

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

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

于 2013-07-24T13:28:55.983 回答
0

您可以在 jQuery 中使用延迟和承诺

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
});
于 2013-07-24T14:29:16.953 回答