2010-06-10 148 views
3

我有一個理解如何解決這個問題的問題。Javascript異步函數

我有兩個功能。在第一個函數中(我稱之爲loadData()),我正在向服務器發出一個異步請求來加載一些數據。

在第二個函數(saveData())中,我也在向服務器發出asyn請求來寫入一些數據。在這個請求的回調中,我打電話給loadData()刷新數據。

現在的問題:在saveData()功能我想等loadData()要完蛋之前,我展示一個對話框(如alert('Data saved')

我想這是一個常見的問題,但我無法找到解決辦法它(如果有的話..)

一種解決方案是使請求同步的,但我現在使用的框架不提供這一點,我希望有一個更好的解決方案..

謝謝給所有人!

回答

10

在這些情況下,關鍵是要鳥巢「成功」回調是這樣的:

$.ajax({ 
    url: "/loadData", 
    success: function() { 
     // Data Loaded... Save the data 
     $.ajax({ 
     url: "/saveData", 
     success: function() { 
      // Data Saved... Display alert 
      alert('Data saved'); 
     } 
     }); 
    } 
}); 

如果您loadData()功能看起來是這樣的:

function loadData() { 
    .ajax({ 
     url: "/loadData", 
     success: function() { 
     // Data Loaded... Process the data 
     } 
    }); 
} 

...那麼你可能想給它一個回調參數,在成功回調返回之前被調用:

function loadData(myCallback) { 
    .ajax({ 
     url: "/loadData", 
     success: function() { 
     // Data Loaded... Process the data 

     // ... Your Data Processing Logic ... 

     // Invoke the callback (if one was passed): 
     if (typeof myCallback === 'function') { 
      myCallback(); 
     } 
     } 
    }); 
} 

然後你就可以實現你這樣的saveData()功能:

function saveData() { 
    loadData(function() { 
     // Data Loaded (and processed by loadData())... Save the data 
     .ajax({ 
     url: "/saveData", 
     success: function() { 
      // Data Saved... Display alert 
      alert('Data saved'); 
     } 
     }); 
    }); 
} 

你依然可以調用loadData()功能,而無需在腳本的其他部分的參數。

+0

這是一個好主意,謝謝! – Ben 2010-06-10 11:34:48

1

嵌套函數是一種解決方案,但在代碼質量方面卻不是個好主意。你可能想看看jQuery的推遲對象來解決它。

Deferred documentation