強制Javascript函數調用等待上一個函數調用完成

Question

我有一個簡單的Javascript函數：

makeRequest();

它做了很多東西，並將大量內容放入DOM中。

我做了幾個電話：

makeRequest('food');
makeRequest('shopping');

但是，它們都發射得太快，以至於它們踩着對方的腳趾。 最終我需要它具有的功能。

makeRequest('food');
wait....
makeRequest('shopping'); only if makeRequest('food') has finished

關於讓這些只能一次執行一個的想法？

謝謝！

Answer 1

如果這些函數實際上執行了一個AJAX請求，那么最好讓它們保持異步。 您可以制作同步AJAX請求，但它會阻止瀏覽器響應並導致糟糕的用戶體驗。

如果這些AJAX請求是依次相互依賴的，那么你需要調查你的函數以查看它是否提供了一個回調機制。

makeRequest('food', function()
{
    // called when food request is done
    makeRequest('shopping');
});

使用jQuery，它看起來像那樣

$.get("/food", function(food)
{
    // do something with food

    $.get("/shopping", function(shopping)
    {
        // do something with shopping
    });
});

Answer 2

我建議您只是異步編寫它們 - 例如，調用makeRequest（'shopping'）; 來自第一次調用的AJAX完成處理程序。

如果您不想異步編寫代碼，請參閱Javascript Strands

Answer 3

我想你有一個回調方法來處理請求的響應？ 完成后，讓它發出下一個請求。

聲明隊列的數組，以及跟蹤狀態的標志：

var queue = [], requestRunning = false;

在makeRequest方法中：

if (requestRunning) {
   queue.push(requestParameter);
} else {
   requestRunning = true;
   // do the request
}

在回調方法中，在處理響應之后：

if (queue.length > 0) {
   var requestParameter = queue.splice(0,1)[0];
   // do the request
} else {
   requestRunning = false;
}