如何在頁面加載后的特定時間添加和刪除 HTML 類？

Question

我正在嘗試在頁面加載幾秒鍾后向 HTML 元素（ID bland-html-element）添加和刪除 HTML 類（.flashy-design）。

我在下面的嘗試不會注入課程。

setTimeout(function() {
    function addFlashyDesign() {
        var element = document.getElementById("bland-html-element");
        element.classList.add("flashy-design");
    }
}, 3000);

或者

function startDelay(){
    setTimeout(function() {
        function addFlashyDesign() {
            var element = document.getElementById("bland-html-element");
            element.classList.add("flashy-design");
        }
    }, 3000);
};

window.onload = "startDelay();";

想法？

Answer 1

您不需要為setTimeout()方法指定window.onload ，因為它會在頁面加載時自行調用。

您也不需要嵌套這么多這樣的函數。 您可以：

在setTimeout()方法之外創建一個命名函數，然后在方法上引用函數名稱，如下所示：

function delayFunc() {
  var element = document.getElementById("bland-html-element");
  element.classList.add("flashy-design");
}

setTimeout(delayFunc, 3000); // The above function will be invoked after 3 seconds

或者

在setTimeout()方法本身中創建一個匿名函數，如下所示：

setTimeout(function(){
  var element = document.getElementById("bland-html-element"); 
  element.classList.add("flashy-design");
}, 3000);

Answer 2

解釋在代碼中。 你犯的主要錯誤是沒有像你應該的那樣使用回調函數。

 let element = document.getElementById("bland-html-element"); // show after 2 seconds // RECOMMENDATION: use window.setTimeout instead of setTimeout // NOTE: use a callback function, not an embedded named function window.setTimeout(function() { element.classList.add("flashy-design"); }, 2000); // hide after 3 seconds window.setTimeout(function() { element.classList.remove("flashy-design"); }, 3000);

 #bland-html-element{ height: 200px; width: 200px; background-color: green; display: none; } #bland-html-element.flashy-design{ display: block; }

 <div id="bland-html-element"></div>

PS：不要使用window.onload 。 改用window.addEventListener('load', function(){}) 。 在我的示例中，我沒有在加載事件之后嵌入它，但是在 DOM 中存在bland-html-element之前，您應該或冒着運行代碼的風險。

Answer 3

這不起作用的原因是，在兩個示例中，您都有一個嵌套函數 - addFlashyDesign - 您沒有調用它。 相反，提取該函數並將函數附加到窗口加載偵聽器。 調用此函數時，它addFlashyDesign在 3 秒后啟動調用addFlashyDesign的超時時間。

如果正如您在問題中提到的那樣，您想在頁面加載后添加該類，則應保留window.onload 。

當包括樣式、圖像和其他資源在內的整個頁面被加載時，window 對象上的 load 事件會觸發。

function addFlashyDesign() {
    var element = document.getElementById("bland-html-element");
    element.classList.add("flashy-design");
}

window.onload = () => setTimeout(addFlashyDesign, 3000);