2009-10-03 82 views
7

我認爲這是一個簡單的問題,但我一直在四處搜索,並沒有在任何地方找到答案。什麼時候執行了javascript函數

的想到的是,我有一些腳本(體內)的HTML頁面像這樣的:

<script type="text/javascript">grf();</script> 

的GRF()函數在一個外部的.js文件中定義。 問題是:瀏覽器加載頁面及其所有外部js文件後,該函數是否執行?或者可以在加載.js文件之前執行函數?如果是這樣,我該如何預防呢?

+0

感謝您回答有關何時執行函數的第一個問題。對於第二個問題,似乎大多數人同意最好的選擇是使用jQuery。然而,我想知道是否有可能知道一個函數是否定義(加載)或不。例如,我可以做這樣的事情來確保elem已經加載:function ff(){if(!document.getElementById('elem'))setTimeout('ff()',250); //從這裏我可以使用'elem'}但是有沒有辦法知道函數是否被定義? – Victor 2009-10-04 10:31:09

+1

@victor - 測試使用:if(typeof(functionName)!='undefined'){//函數存在} – x0n 2009-10-05 02:47:04

+0

如果不使用任何庫,並且想要運行使用DOM的代碼,最可靠的方法是添加您的腳本標籤位於close body標籤之後,而不是您正在使用的輪詢機制。 – 2010-10-26 22:40:04

回答

9

要看到,如果一個函數被定義:

// functions are defined or undefined just like regular variables 
function myFunc() { 
    /*--code here--*/ 
} 

// So we just need to see if it's defined 
if(myFunc) { 
    /*--do something here--*/ 
} else { 
    /*--wait, retry or w/e--*/ 
} 

當外部腳本被找到時,(X)HTML將不會被讀取進一步直到外部腳本被讀取(和內執行的代碼,如果有任何那裏有可執行代碼)。

因此,在外部文件'包含'後調用外部文件中的函數不能生成函數未定義的錯誤。 (但是,請記住,如果該外部函數試圖操作DOM或頁面中仍然「不存在」的元素,將會出錯。)

+0

+1 - 在我做之前回答。 – 2009-10-17 03:35:08

+0

當myFunc未定義時'if(myFunc)'會導致錯誤。 'if(typeof myFunc ==「undefined」)'不會(如z0n所述) – 2010-10-26 22:36:13

8

該方法將在瀏覽器加載頁面時執行,當它到達<script>塊的末尾時。如果外部JS文件包含在比調用此方法的頁面更遠的頁面中,則它將引發錯誤(方法未定義)。

如果您想等到頁面和資源已經加載完畢,最好使用庫。使用建議的onload事件是有限的,因爲它只支持添加一個處理程序(添加另一個將覆蓋前一個)。下面是使用jQuery一個例子:遇到當

<script type="text/javascript"> 
$(document).ready(function() { 
    //code goes here 
    }); 
</script> 
14

運行該功能。如果你希望它在頁面加載後運行,標準方法是鉤住窗口的onload事件。 jQuery有這個很大的支持,但讓我們先從地面:

<script type="text/javascript">window.onload = function() { grf(); }</script> 

這將踩在腳下比可能已經在頁面上,這是對先前指派任何其他onload事件處理程序,爲什麼大多數人使用jQuery這是謹慎以鏈前面的處理:

<script type="text/javascript">$(document).ready(function() { grf(); });</script> 

當然這第二個例子,你需要進一步包括了jQuery庫在頁面(這聽起來好像你在一個位置是不這樣做)。

+1

+1也用於提供非jQuery示例 – 2009-10-03 15:45:34

+0

該函數運行後遇到它的* call *('grf()')。 – Gumbo 2009-10-03 15:56:41

+0

這是如何回答這個問題的? – levik 2009-10-03 16:41:40

3

瀏覽器在看到標籤時執行它。不僅其他腳本可能尚未加載,DOM可能無法構建。但是,可以保證腳本按照它們出現在HTML中的順序執行。

如果您可以使用jQuery,它具有$ .ready()函數,該函數在DOM準備好時調用回調函數,因此每個腳本都已加載。使用它就像

$.ready(grf); 

或與它通常使用的匿名功能。

+0

+1爲什麼這個答案被拒絕?直接傳遞函數並不是將其封裝在一個額外的匿名函數中是絕對合法的。 – Gumbo 2009-10-03 15:58:50

+0

@gumbo,因爲它不太清楚發生了什麼 - OP可能已經足夠新到javascript了。 – x0n 2009-10-03 16:18:06

+0

@gumbo和備案,我同意你,它不應該被拒絕(我也+1了答案) – x0n 2009-10-03 16:18:54

0

防止腳本問題的最好方法是使用JavaScript庫,如jQuery,Mootools等,它可以很容易地將任何代碼綁定到各種事件(dom.ready等),以確保事先充分加載所有事件。

7

只要腳本文件包含在函數用法的上面,該函數就可用。瀏覽器在遇到時會停止呈現

<script src="..."></script> 

標記。當腳本被下載並解析時,它將僅恢復處理文檔頁面。所以在腳本中定義的任何功能將提供正確後:

<script src="..."></script> <!-- Browser waits until this script is loaded --> 
<script> 
    foo(); // if function foo was in the script above, it is ALWAYS available now 
</script> 

這實際上並不總是一個期望的行爲 - 有時你不希望等待一個腳本來下載,因爲它可能使你的代碼似乎慢。一種技巧是在所有HTML已經被渲染的時候,在</body>之前,讓頁面底部的所有腳本加載並執行。

相關問題