Question

我正在尝试将元素设置为display：none; 5秒后但该函数立即触发，所以我想知道setTimeout出了什么问题。

我已经在网上搜索了很多但是找到了这个缺陷，但我说每个来源，他们说我应该使用SetTimeout，因为我正在使用它。我真的很感激任何答案。

var sideholder = document.getElementById("intro-holder");
window.onload = function ut() {
   sideholder.style.display = "none";
 }
setTimeout(ut, 5000);

Answer 1

您将该函数设置为window.onload的值，它将在窗口加载后运行。但是，在此之前，JavaScript运行时将继续到下一行，这是您尝试在5秒后运行名为ut的函数，但是该名称ut在此处没有意义因为你最初使用它的方式而指出。

将代码更改为以下内容，以便一旦该页面加载，它将计为5秒，然后运行您的函数，该函数将被声明为函数声明，而不是函数表达式。

此外，在加载DOM之前，您不应该扫描DOM以获取“intro-holder”（取决于您在页面中拥有此代码的位置，您可能不需要进行此更改）。

// Get variables declared, but wait to initialize:
var sideholder = null;
var timer = null;

// When the window reports it is loaded, run a function that initiates the 
// timer. Also, it's always a good idea to set a variable to the integer
// that represents the running timer in case you want to stop the timer 
// later using clearTimeout(timer);
window.onload = function(){

 // Now that the window is loaded, it's safe to go looking for DOM elements
 sideholder = document.getElementById("intro-holder");

 // Start the clock
 timer = setTimeout(ut, 5000);

}

function ut() {
   sideholder.style.display = "none";
}

Answer 2

您正确使用setTimeout，但window.onload设置为等于您的ut函数，使您的元素在pageload上消失（style：none）。然后5秒钟后，ut运行并出现错误，因为该元素已被隐藏。 window.onload应设置为等于setTimeout，以便浏览器知道在页面加载后立即运行它。然后可以在之后定义ut函数。然后功能ut在5秒后运行。

var sideholder = document.getElementById("intro-holder");

function ut () {
     sideholder.style.display = "none";
  }

window.onload = setTimeout(ut, 5000);

#intro-holder{
  height: 200px;
  width: 200px;
  background-color: blue;
  }

<div id="intro-holder">
  </div>

setTimeot不会工作

2 个答案: