JAVASCRIPT-“;事件内部代码”;超时?o.o

JAVASCRIPT - "Code inside event" timeout? o.O

本文关键字：超时 内部 事件 JAVASCRIPT- 代码      更新时间：2023-09-26

我的页面中有此事件

window.addEventListener("load", function(){
	           var load_screen = document.getElementById("load_screen");
	           document.getElementsByTagName("BODY")[0].setAttribute("class", "loaded");
            })

wich在页面加载时为主体class="loaded"添加了一个属性，但由于我添加了一种很酷的预加载效果，我希望在显示真实页面之前让事件等待3-5秒，即使它已经完全加载（但如果没有完全加载，当然还要等待更多）。这在某种程度上可能吗？

如果您希望延迟至少为5秒，您可以捕获建立事件处理程序时的时间（即，早在"加载"事件触发之前），然后在处理程序中再次检查时间。

var startTime = Date.now();
window.addEventListener("load", function(){
  var load_screen = document.getElementById("load_screen");
  setTimeout(function() {
    document.getElementsByTagName("BODY")[0].setAttribute("class", "loaded");
  }, Math.max(0, 5000 - (Date.now() - startTime)));
});

此外，没有理由使用.setAttribute()来设置类：

    document.getElementsByTagName("BODY")[0].className = "loaded";

就我个人而言，我要么使用.classList设施，要么去老学校，增加新的班级：

    document.getElementsByTagName("BODY")[0].className += " loaded";

这样就不会踩到<body>上的任何其他类（可能在将来）。

在setTimeout函数中包装set属性，以便在设定的时间后执行。

window.addEventListener("load", function(){
                   var load_screen = document.getElementById("load_screen");
                   setTimeout(function(){document.getElementsByTagName("BODY")[0].setAttribute("class", "loaded");}, 3000);
                })

使用window.setTimeout

window.addEventListener("load", function(){
           window.setTimeout(
              function() {
                 var load_screen = document.getElementById("load_screen");
                 document.getElementsByTagName("BODY")[0].setAttribute("class", "loaded"); 
               },
               3000);
        })
相关文章：