如何強制javascript執行順序

Question

我有一個頁面，用戶可以點擊一個按鈕來通過xhr獲取請求檢索數據。在數據加載和解析時，我想要顯示一個加載消息，一旦準備就緒，數據將被替換爲數據。我使用的是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; 
} 

我的問題m有就是getRes ults函數總是等到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的

http://www.bitstorm.org/weblog/2012-1/Deferred_and_promise_in_jQuery.html使用deffereds和承諾。如果你使用Ajax請求，你可以像這樣鏈接（因爲jQuery 1.8）。

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

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

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