異步JavaScript準備功能

Question

爲了加速我的應用程序，我想在DOM準備好之前準備好一些數據，然後在準備好DOM時使用這些數據。

下面是它可能是：

var data = function prepareData(){ 
    ... 
}(); 

$(document).ready(function() { 

    // use data to build page 

} 

如何準備數據以供日後使用？ 感謝

Answer 1

您需要應該使用括號周圍的函數表達式爲清楚（因爲在你定義和調用功能，但沒有使用的返回值類似的情況，這將是一個語法錯誤沒有他們）。另外，當你使用函數表達式時，你不想給它一個名字。所以：

var data = (function(){ 
    ... 
})(); 

，或者使用功能聲明代替：

var data = processData(); 
function processData() { 
    ... 
} 

（爲什麼不與函數表達式中使用的名字，因爲在不同的實現中的錯誤，特別是互聯網瀏覽器之前，IE9，其中will create two完全不相關的功能。）

但是，我不清楚你想要達到什麼目的。當瀏覽器到達script元素時，它將切換到JavaScript解釋器並等待它完成，然後繼續構建DOM（因爲您的腳本可能使用document.write添加到HTML標記流）。您可以使用async or defer attributes答應你不打算使用document.write瀏覽器，在支持它們的瀏覽器，但...

---

更新：下面你說過：

，因爲prepareData是長時間的函數，我認爲瀏覽器在構建DOM樹時可以執行此操作。不幸的是'$（document）.ready'在prepareData完成之前觸發。現在的問題是如何教「$（文件）。就緒」等待就緒數據

的唯一途徑，而processData運行是ready處理程序可以觸發可能，如果processData是使用異步AJAX（或一對夫婦邊緣條件約alert,confirm，等等，但我認爲你沒有這樣做）。如果是這樣，你不能將結果作爲函數的返回值返回（儘管你可以返回一個繼續作爲ajax回調結果更新的對象）。否則，這是不可能的：瀏覽器上的JavaScript是單線程的，ready處理程序將排隊等待解釋程序完成其以前的任務（processData）。

如果processData沒有做任何事情異步，我懷疑什麼症狀是你看到讓你覺得ready處理程序期間processData發射都有不同的原因。

但在異步的東西，三個選項的情況下：

1. 如果你要撐起準備處理程序的控制不是，你可能看jQuery的holdReady功能。請致電$.holdReady(true);阻止活動，並使用$.holdReady(false);停止舉辦活動。

2. 這很簡單，重新安排ready處理程序。以下是我想做到這一點（請注意，我在一個範圍功能包一切，所以這些東西都不是全局）：

   (function() { 
       var data = processData(); 
   
       $(onPageReady); 
   
       function processData() { 
       } 
   
       function onPageReady() { 
        if (!data.ready) { 
         // Wait for it to be ready 
         setTimeout(onPageReady, 0); // 0 = As soon as possible, you may want a 
                // longer delay depending on what `processData` 
                // is waiting for 
         return; 
        } 
       } 
   
   })(); 
   

   注意，我高興地在onPageReady功能使用data，因爲我知道它在那裏;該功能將不會運行，直到processData已返回。但我假設processData正在返回一個緩慢通過ajax調用填充的對象，所以我在對象上使用了一個ready標誌，當所有數據準備就緒時，該標誌將被設置。

3. 如果您可以更改processData，還有更好的解決方案：當processData完成後觸發ready處理程序。下面是當processData與它所需要做的做了代碼：

   $(onPageReady); 
   

   這工作，因爲如果DOM還沒有準備好，只是時間表的呼籲。如果DOM已經準備好，jQuery將立即調用你的函數。這可以防止上面的混亂循環。