我如何编写函数以将窗口加载延迟3秒钟？

Question

我想将下面的JavaScript代码执行的操作延迟3秒钟。我该怎么做？

window.addEventListener("load", function alertFunc() {
    const loader = document.querySelector(".loader");
    loader.className += " hidden"; //class="loader hidden"
});

Answer 1

您可以将setTimeout功能与3000一起使用

 window.addEventListener("load", function alertFunc() {

        setTimeout(()=>{
        const loader = document.querySelector(".loader");
        loader.className += " hidden"; //class="loader hidden"
        }, 3000)
    });

Answer 2

尝试一下：

window.addEventListener('load', function alertFunc() {
  setTimeout(function() {
    const loader = document.querySelector('.loader');
    loader.className += ' hidden'; //class="loader hidden"
  }, 3000);
});

Answer 3

window.addEventListener("load", function alertFunc() {
    setTimeout(function() {
        const loader = document.querySelector(".loader");
        loader.className += " hidden"; //class="loader hidden"
    }, 3000);
});

https://www.w3schools.com/jsref/met_win_settimeout.asp

Answer 4

[setTimeout()的一种解决方案：

window.addEventListener("load", function alertFunc() {
    setTimeout(()=>{
       const loader = document.querySelector(".loader");
       loader.className += " hidden"; //class="loader hidden"
    }, 3000)
});

具有async / await的其他解决方案：

function sleep(time){
   return new Promise((resolve) => {
      setTimeout(resolve, time);
   })
}
window.addEventListener("load",async  function alertFunc() { 
   await sleep(3000);       
   const loader = document.querySelector(".loader");
   loader.className += " hidden"; //class="loader hidden"
});

Answer 5

您可以从javascript使用setTimeout

window.addEventListener("load", function() {
  console.log("Doc Loaded");
  setTimeout(callAfter3Second,3000);
});


function callAfter3Second(){
    console.log("3 second Waiting Done");
}