我認爲這是一個簡單的問題,但我一直在四處搜索,並沒有在任何地方找到答案。什麼時候執行了javascript函數
的想到的是,我有一些腳本(體內)的HTML頁面像這樣的:
<script type="text/javascript">grf();</script>
的GRF()函數在一個外部的.js文件中定義。 問題是:瀏覽器加載頁面及其所有外部js文件後,該函數是否執行?或者可以在加載.js文件之前執行函數?如果是這樣,我該如何預防呢?
我認爲這是一個簡單的問題,但我一直在四處搜索,並沒有在任何地方找到答案。什麼時候執行了javascript函數
的想到的是,我有一些腳本(體內)的HTML頁面像這樣的:
<script type="text/javascript">grf();</script>
的GRF()函數在一個外部的.js文件中定義。 問題是:瀏覽器加載頁面及其所有外部js文件後,該函數是否執行?或者可以在加載.js文件之前執行函數?如果是這樣,我該如何預防呢?
要看到,如果一個函數被定義:
// 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或頁面中仍然「不存在」的元素,將會出錯。)
+1 - 在我做之前回答。 – 2009-10-17 03:35:08
當myFunc未定義時'if(myFunc)'會導致錯誤。 'if(typeof myFunc ==「undefined」)'不會(如z0n所述) – 2010-10-26 22:36:13
該方法將在瀏覽器加載頁面時執行,當它到達<script>
塊的末尾時。如果外部JS文件包含在比調用此方法的頁面更遠的頁面中,則它將引發錯誤(方法未定義)。
如果您想等到頁面和資源已經加載完畢,最好使用庫。使用建議的onload
事件是有限的,因爲它只支持添加一個處理程序(添加另一個將覆蓋前一個)。下面是使用jQuery一個例子:遇到當
<script type="text/javascript">
$(document).ready(function() {
//code goes here
});
</script>
運行該功能。如果你希望它在頁面加載後運行,標準方法是鉤住窗口的onload事件。 jQuery有這個很大的支持,但讓我們先從地面:
<script type="text/javascript">window.onload = function() { grf(); }</script>
這將踩在腳下比可能已經在頁面上,這是對先前指派任何其他onload事件處理程序,爲什麼大多數人使用jQuery這是謹慎以鏈前面的處理:
<script type="text/javascript">$(document).ready(function() { grf(); });</script>
當然這第二個例子,你需要進一步包括了jQuery庫在頁面(這聽起來好像你在一個位置是不這樣做)。
瀏覽器在看到標籤時執行它。不僅其他腳本可能尚未加載,DOM可能無法構建。但是,可以保證腳本按照它們出現在HTML中的順序執行。
如果您可以使用jQuery,它具有$ .ready()函數,該函數在DOM準備好時調用回調函數,因此每個腳本都已加載。使用它就像
$.ready(grf);
或與它通常使用的匿名功能。
防止腳本問題的最好方法是使用JavaScript庫,如jQuery,Mootools等,它可以很容易地將任何代碼綁定到各種事件(dom.ready等),以確保事先充分加載所有事件。
只要腳本文件包含在函數用法的上面,該函數就可用。瀏覽器在遇到時會停止呈現
<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>
之前,讓頁面底部的所有腳本加載並執行。
感謝您回答有關何時執行函數的第一個問題。對於第二個問題,似乎大多數人同意最好的選擇是使用jQuery。然而,我想知道是否有可能知道一個函數是否定義(加載)或不。例如,我可以做這樣的事情來確保elem已經加載:function ff(){if(!document.getElementById('elem'))setTimeout('ff()',250); //從這裏我可以使用'elem'}但是有沒有辦法知道函數是否被定義? – Victor 2009-10-04 10:31:09
@victor - 測試使用:if(typeof(functionName)!='undefined'){//函數存在} – x0n 2009-10-05 02:47:04
如果不使用任何庫,並且想要運行使用DOM的代碼,最可靠的方法是添加您的腳本標籤位於close body標籤之後,而不是您正在使用的輪詢機制。 – 2010-10-26 22:40:04