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

您无需为window.onload方法指定setTimeout()，因为它会在页面加载时自动调用。

您也不需要嵌套这么多的函数。您可以：

在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(){})。在我的示例中，我没有在加载事件后嵌入它，但是您应该或者冒着bland-html-element出现在DOM中的风险运行代码。

Answer 3

此方法不起作用的原因是，在两个示例中，您都没有调用嵌套函数addFlashyDesign。而是提取该函数并将函数附加到窗口onload侦听器。调用此函数时，它将启动超时，该超时将在3秒后调用addFlashyDesign。

如您在问题中提到的，如果要在页面加载后添加类，则应保留window.onload。

The load event on the window object在加载整个页面（包括样式，图像和其他资源）时触发。

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

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

如何在页面加载后的特定时间添加和删除HTML类？

3 个答案:

或