我需要幫助來放置函數，以便在呈現DOM之后運行我的代碼

Question

我有一行代碼比DOM運行得更快，因此我需要一個超時功能，但我不知道將其放在哪里。

function testing() {
  var newHeadline = document.createElement("h1");
  newHeadline.textContent = "Headline";

  document.getElementsByClassName("col-sm")[0].insertBefore(newHeadline, document.getElementsByClassName("text-content")[0]);
  for (var a = 0; a < 10; a++) {
    if (document.getElementsByClassName("form-control")[0] != undefined) {
      document.getElementsByClassName("form-control")[0].parentElement.remove();


      return true
    }
  }
}

Answer 1

使用window.onload。 window.onload確保首先加載窗口中的所有內容，包括腳本和圖像，然后加載所有內容，然后調用提供的函數。

 window.onload=function testing() { var newHeadline = document.createElement("h1"); newHeadline.textContent = "Headline"; document.getElementsByClassName("col-sm")[0].insertBefore(newHeadline, document.getElementsByClassName("text-content")[0]); for (var a = 0; a < 10; a++) { if (document.getElementsByClassName("form-control")[0] != undefined) { document.getElementsByClassName("form-control")[0].parentElement.remove(); return true } } } 

Answer 2

如果要等待直到所有HTML都已加載並且解析了JavaScript，請使用DOMContentLoaded事件；如果也要等待所有圖像和樣式都已應用，請使用load事件。

if (document.readyState === "complete") testing();
else addEventListener("DOMContentLoaded", testing);

要么

if (document.readyState === "complete") testing();
else addEventListener("load", testing);

您還可以使用一個空的timeout ，在腳本被解析並運行之后立即運行該函數。

setTimeout(testing, 0);