延迟后使用香草JavaScript添加课程

Question

我正在制作一个带有启动画面的网站，我想使其在3秒后消失。 当我包含jQuery时，我可以成功完成此操作，但这需要花费一些时间来加载（特别是如果未缓存），因此启动画面仍会显示一小段时间。

我也在使用cookie，以便它只会在页面的第一次加载时显示（因此不会过于令人讨厌）。

这是我的HTML：

<div class="splash">
    splash content
</div>

这是正常工作的jQuery（我想避免）：

if(document.cookie.indexOf("visited=true") === -1) {
    $(".splash").delay(3000).queue(function(){
        $(this).addClass("hidden").dequeue();
    });
} else {
    $(".splash").addClass("hidden");
}

这是我针对javascript提出的方法，但是它不起作用：

document.getElementsByClassName("splash").addEventListener("load",
function() {
    if(document.cookie.indexOf("visited=true") === -1) {
        setTimeout(function(){
            this.classList.add("hidden");
        }, 3000);
    } else {
        this.classList.add("hidden");
    }
});

Answer 1

我认为您不想将功能添加为启动的load事件侦听器。 您应该将其添加到页面的load事件。

有关重新组织代码的更多详细信息，请参见内联注释。 不幸的是，它在Stack Overflow代码段环境中不适用于Cookie。

请注意，默认情况下，初始设置为隐藏（通过CSS）。 与默认显示它然后隐藏它相比，这是一个更好的做法。 如果在读取cookie后确定不应显示启动画面，则某些用户可能由于处理限制而暂时在屏幕上看到启动画面，或更糟的是，如果您的代码中存在任何类型的错误，启动画面可能会最终显示出来，并且永远不会被删除，因为JS会因错误而停止执行。

 // Get a reference to the splash dialog var splash = document.querySelector(".splash"); // When the window is loaded.... window.addEventListener("load", function() { // Check to see if the cookie indicates a first-time visit if(document.cookie.indexOf("visited=true") === -1) { // Reveal the splash (remember: splash is hidden by default by CSS) splash.classList.remove("hidden"); // .5 seconds later, hide the splash setTimeout(function(){ splash.classList.add("hidden"); // >> Set cookie to visited here << }, 500); } }); 

 .splash { height:200px; width:200px; background:yellow; } .hidden { display:none; } 

 <div class="splash hidden">SPLASH !</div> 

Answer 2

document.getElementsByClassName("splash").addEventListener("load", //not possible as ByClassName returns a collection not an element
function() {
if(document.cookie.indexOf("visited=true") === -1) {//why not simply !...
    setTimeout(function(){
        this.classList.add("hidden");//this is window as setTimeout is a window function...
    }, 3000);
} else {
    this.classList.add("hidden");//the only that work
}
});

正确的方式：

document.getElementsByClassName("splash").forEach(el=>{el.addEventListener("load",function() {
if(!document.cookie.indexOf("visited=true")) {
    setTimeout(function(){
        this.classList.add("hidden");
    }.bind(this), 3000);//fix of context
} else {
    this.classList.add("hidden");
}
})});

Answer 3

您可以在页面底部包含此IIFE ，以便在初始DOM元素就绪时执行该IIFE 。 这样，您可以避免事件侦听器。

我也将您的启动转换为使用ID splash而不是使用类。 如果您喜欢该类，则在使用document.getElementsByClassName("splash")它将返回一个元素数组。 在这种情况下，您必须指定要使用返回数组的哪些元素（即document.getElementsByClassName("splash")[0]或对其进行迭代）。

 (function() { var splash = document.getElementById("splash"); if (document.cookie.indexOf("visited=true") === -1) { splash.classList.remove("hidden"); // Display the splash setTimeout(function() { splash.classList.add("hidden"); // Hide it after the timeout }, 500); } })(); 

 #splash { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #ddd; } .hidden { display: none; } 

 Not splashed! <div id="splash" class="hidden">Splashed!</div>