如何强制javascript按顺序执行

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

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

HTML

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”类并显示results 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;
}

---

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

将该方法重命名为

loadData

，而不是

getData

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;
    });        
}

---

您可以在jQuery中使用差异和承诺

。如果您使用ajax请求，您可以这样链接（从jQuery1.8开始）

---

从CSS:-）重复的@Bergi中删除

=

。抱歉，我写得很快，而不是复制粘贴。=在我的原始代码中不存在：）已进行相应编辑。如果您认为该副本不适用，需要进一步帮助，请向我们展示您的

getData

函数。请将属性对象中的

sync:true

传递给我们，谢谢。我做了更多的探索，发现如果我用一个虚拟函数替换dojo.xhrGet函数，也会发生这种情况。我将提出一个不同的问题，该问题的措辞更适合排除dojo部分。

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;
}

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;
    });        
}

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

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

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