$(document).ready在JavaScript中等效-有解無憂

我嘗試找到 jQuery $(document).ready 的等效代碼，并發現有一些不同的版本：

版本 1：

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

版本 2：

document.addEventListener('DOMContentLoaded', fn);

有什么不同？為什么版本 1 會檢查 document.readyState？此外，版本 1 是一個函式，而版本 2 是一個已執行的陳述句。因此，版本 1 是否應該有一個宣告：

ready(fn);

uj5u.com熱心網友回復：

jQuery 的檔案可以回答您的問題。

jQuery.ready()：

大多數瀏覽器都以DOMContentLoaded事件的形式提供類似的功能。然而，jQuery 的.ready()方法在一個重要且有用的方面有所不同：如果 DOM 準備就緒并且瀏覽器DOMContentLoaded在代碼呼叫之前觸發.ready( handler )，函式處理程式仍將被執行。相比之下，DOMContentLoaded在事件觸發后添加的事件偵聽器永遠不會執行。...

所以你的版本 2有描述的問題。雖然第1版呼叫傳遞函式的檔案后也已經準備好了。

uj5u.com熱心網友回復：

不同之處在于，即使腳本在DOMContentLoaded觸發后執行（document.readyState有關更多資訊，請參閱），第一個也將起作用，前提是您將呼叫添加到ready您詢問的內容中。第二個不會，因為事件只被觸發一次，所以如果腳本在此之后執行，fn將永遠不會被呼叫。

那么如何在事件觸發后執行腳本呢？基本上，如果它是動態添加的，而不是作為檔案初始 HTML 的一部分。以下是一些示例，說明如何做到這一點：

script在檔案加載后添加的元素。
通過 dynamicimport()而不是 static加載的模塊import。

可能還有其他人。

此外，版本 1 是一個函式，而版本 2 是一個已執行的陳述句。因此，版本 1 是否應該有一個宣告：
ready(fn);

是的，完全正確。

我應該注意，如果您控制腳本在頁面中的包含方式，則不需要其中任何一個。（因此，您確實在庫中需要它，但在應用程式/頁面中很少需要它。）如果您控制腳本在頁面中的包含方式，并希望您的代碼在 DOM 構建后運行，您可以通過以下幾種方式進行那個（恕我直言，按照最佳實踐的順序）：

type="module"在腳本上使用以使其成為模塊。在構建 DOM 之前不會執行模塊（它們是自動延遲的，甚至是行內模塊；請參閱下一個要點）。
defer在您的script標簽上使用（僅適用于src參考檔案的腳本標簽，不適用于行內腳本）。在構建 DOM 之前，不會執行延遲腳本。
將script標簽放在檔案的末尾，就在結束</body>標簽之前。

如果您執行任何這些操作，則無需使用ready（jQuery 或您問題中的那些）。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/339750.html

標籤：javascript 查询

上一篇：jQuery無法添加元素

下一篇：OwlCarousel-導航按鈕移動頁面中的所有滑塊