瞭解javascript中的流程

-1

對JS很新穎，只是玩弄了我從書中寫下的示例。使用下面的代碼 - 爲什麼我的函數沒有被執行？我打電話給他們，語法是正確的。如果我把document.addEventListener（「DOMContentLoaded」，init，false）; 然後init（）函數將執行，但不是test（）函數。瞭解javascript中的流程

我也很困惑，應該正確放置document.addEventListener的位置，以及它對於init函數的意義。應該首先調用init（）函數嗎？ init（）函數中通常會發生什麼？

在此先感謝。下面的代碼;

function init() { 
    var panel = document.getElementById("panel"); 
    panel.innerHTML = "Hello World"; 
} 


function test() { 
    var panel = document.getElementById("panel"); 
    panel.innerHTML = "See ya"; 

} 
init(); 
test();

來源

2013-10-15 DJC

你怎麼知道是不是正在執行的功能是什麼？整個文檔是什麼樣的？ JavaScript控制檯中是否顯示任何錯誤？ –

jsfiddle會很有用 – OrangeDog

因爲當我加載html頁面時，它是空白的 – DJC

您可能在加載DOM元素之前執行這些函數。頁面從上至下讀取。如果該函數在讀取HTML之前執行，則元素將不存在。

許多開發人員將腳本作爲身體的最後一個元素來避免這種情況。

或者使用onload處理，這樣

window.onload = function() { 
    init(); 
    test(); 
}

的功能並不需要在處理程序

編輯定義。同樣的元素也是寫數據的，所以只有第二個函數會有你能看到的結果。您可以寫入一個單獨的元素，或者按照一個答案建議並將數據添加到一起。

來源

2013-10-15 16:51:03

不能同意更多。你也可以綁定到body標籤的onload函數。 ;） – abc123

嗨傑夫曼感謝你 - 你是正確的 - 我把腳本標籤移動到正文部分的末尾，它工作。然而 - 這是最好的做法，因爲我在過去幾周使用過一些在線教程，我認爲他們說要把它放在頭部？ – DJC

@ abc123 - 不，你不能。 body元素的'onload' *屬性映射到文檔的onload *事件*。 – Quentin

這聽起來像方法被調用，但他們正在提出錯誤，因爲它們在DOM完成加載之前調用。在正常情況下，只要瀏覽器到達它就會執行這樣的腳本，所以如果在DOM加載之前發生這種情況（通常是這種情況），對document.getElementById（）的調用將失敗，因爲文檔hasn'沒有被加載。您接近您對document.addEventListener（「DOMContentLoaded」，init，false）的調用; - 這告訴瀏覽器在加載DOM時調用init。但是，在這種情況下你只能調用init，所以test（）不會被調用。

我會建議刪除你的內聯調用init（）;和test（）;,然後添加以下內容：

function onLoaded(){ 
    init(); 
    test(); 
}

，然後調用您的事件偵聽器裝載的：

document.addEventListener ("DOMContentLoaded" , onLoaded , false);

來源

2013-10-15 16:52:47

您並未移除eventListener ...如果您要推薦此道路，請確保您顯示刪除eventListeners非常重要，否則您將最終發生內存泄漏。我不認爲這將是一個首選的解決方案。 – abc123

@ abc123 - 如果你的函數引用了它所綁定的元素並且你正在使用IE，你最終會發生內存泄漏。使用'addEventListener'不會導致內存泄漏。這*是首選方法。 – Quentin

@Quentin閱讀更多後你絕對正確！感謝擴大我的知識。 – abc123

瞭解javascript中的流程

回答

相關問題