在X秒后执行JavaScript

Question

我正在构建一个插页广告页面，使用<div>和JavaScript，脚本非常简单但很整洁。

一切都正常工作，但我还想在几秒钟后关闭这些div（例如10秒），这是我目前的代码：

• 我有两个div，1和2。
• 我已经为div 1设置了CSS，如：display: none; （div 1 包含闪屏内容）
• Div 2 是覆盖整个页面并只留下 div 1可见的层。

为了加载这些div，我有一个 onload 函数，如下：

onload="document.getElementById('div1').style.display='block';document.getElementById('div2').style.display='block'"

我有一个onclick函数来隐藏div，代码如下：

<a href = "javascript:void(0)" onclick = "document.getElementById('div1').style.display='none';document.getElementById('div2').style.display='none'"></a>

如何在JavaScript中使用定时器执行onclick函数？

- Paulo Capelo

Answer 1

我相信你正在寻找setTimeout函数。

为了让你的代码更加整洁，可以在一个<script>块中定义一个单独的onclick函数：

function myClick() {
  setTimeout(
    function() {
      document.getElementById('div1').style.display='none';
      document.getElementById('div2').style.display='none';
    }, 5000);
}

然后从 onclick 中调用您的函数。

onclick="myClick();"

- Strelok

---

我不明白，你刚才说你是在onclick中完成的？我们有什么遗漏吗？ - Strelok

第二，我如何在不使用onclick、onload等的情况下执行myClick函数？我希望在加载代码的同时启动该函数。 - Paulo Capelo

老问题，但最佳解决方案是 - 在脚本标签中插入 myclick();，这将在文档开始加载时自动触发myclick函数，并且根据函数的定义，它将在5秒后执行。 - Harendra Chauhan

Answer 2

使用setTimeout方法可以根据你设置的时间来执行任何JavaScript代码。

语法

setTimeout(code, millisec, lang)

使用方法：

setTimeout("function1()", 1000);

更多细节，请参阅http://www.w3schools.com/jsref/met_win_settimeout.asp

- Selvakumar Ponnusamy

---

请注意，使用重载来提供使用字符串的函数被认为是不良实践。最好使用 setTimeout(function1, 1000); 或 setTimeout(function() { function1(); }, 1000); 或 setTimeout(() => function1(), 1000);，具体取决于 function1 中 this 引用的性质。此外，我更喜欢使用 MDN 的 setTimeout 文档。 - Heretic Monkey

Answer 3

onclick = "setTimeout(function() { document.getElementById('div1').style.display='none';document.getElementById('div2').style.display='none'}, 1000)"

将1000更改为您想要延迟的毫秒数。

- Dogbert