导航：首页 > 开发技术 >

在JavaScript中什么是setTimeout()

发表于：2026-11-01 作者：千家信息网编辑

千家信息网最后更新 2026年11月01日，这篇文章主要为大家展示了"在JavaScript中什么是setTimeout()"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"在JavaScript中什么

千家信息网最后更新 2026年11月01日在JavaScript中什么是setTimeout()

这篇文章主要为大家展示了"在JavaScript中什么是setTimeout()"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"在JavaScript中什么是setTimeout()"这篇文章吧。

什么是setTimeout()在JavaScript？

setTimeout() 是一种在定时器运行完成后执行一段代码的方法。

这是该setTimeout()方法的语法。

let timeoutID = setTimeout(function, delay in milliseconds, argument1, argument2,...);

让我们分解一下语法。

功能

setTimeout() 将设置一个计时器，一旦计时器用完，该功能将运行。

以毫秒为单位的延迟

在此方法中，您可以指定希望函数延迟多少毫秒。1,000 毫秒等于 1 秒。

在本例中，消息将在 3 秒延迟后出现在屏幕上。（3,000 毫秒）

const para = document.getElementById("para");function myMessage() {  para[xss_clean] = "I just appeared";  console.log("message appeared");}setTimeout(myMessage, 3000);

如果setTimeout()方法中不存在延迟，则将其设置为零，消息将立即出现。

const para = document.getElementById("para");function myMessage() {  para[xss_clean] = "No delay in this message";  console.log("message appeared immediately");}setTimeout(myMessage);

参数

你还可以将可选参数传递给函数。

在此示例对话中，Britney 将提出问题，Ashley 的回复将延迟 3 秒。它将包括lunchMenu函数中的两个可选参数。

const ashley = document.getElementById("ashley");function lunchMenu(food1, food2) {  ashley[xss_clean] = `Ashley: I had ${food1} and ${food2}.`;}setTimeout(lunchMenu, 3000, "pizza", "salad");

超时ID

setTimeout()将返回timeoutID定时器的正整数和唯一 ID。

清除超时（）

此方法用于取消setTimeout(). 在方法内部，您必须引用timeoutID.

这是基本语法。

clearTimeout(timeoutID)

在此示例中，消息将在 10 秒（10,000 毫秒）延迟后出现。但是如果用户点击Stop Timer按钮，那么setTimeout()将被取消。 const timerMsg = document.getElementById("message1");

const stopBtn = document.getElementById("stop");function timerMessage() {  timerMsg[xss_clean] = "Thanks for waiting!";}let timeoutID = setTimeout(timerMessage, 10000);stopBtn.addEventListener("click", () => {  clearTimeout(timeoutID);  timerMsg[xss_clean] = "Timer was stopped";});

你应该为 setTimeout() 传入一个字符串而不是一个函数

传递字符串而不是函数被认为是不好的做法和安全风险。

避免这样写setTimeout()：

setTimeout("console.log('Do not do this');", 1000);

一些代码编辑器会警告您并建议您改用函数。

在这种情况下，始终使用函数而不是字符串。

setTimeout(function () {  console.log("Do this instead");}, 1000);

如何setInterval()从不同setTimeout()？

与setTimeout()在延迟后仅执行一次函数不同，setInterval()它将每隔设定的秒数重复一次函数。如果你想停止setInterval()，那么你使用clearInterval().

setInterval()与setTimeout()的语法：

let intervalID = setInterval(function, delay in milliseconds, argument1, argument2,...);

在这个例子中，我们有一条每秒被打印到屏幕上的销售信息。

let intervalID = setInterval(() => {  salesMsg[xss_clean] += "Sale ends soon. BUY NOW!
";}, 1000);

在setTimeout()方法内部，我们使用clearInterval()10 秒后停止打印消息。

setTimeout(() => {  clearInterval(intervalID);}, 10000);

就像 with 一样setTimeout()，您必须在方法中使用计时器的唯一 ID clearInterval()。

真实项目示例

现在，我们知道如何setTimeout()和setInterval()工作，让我们来看看它是如何能应用到实际功能，在网站上的例子。

在这个例子中，我们有一个进度条，它会在页面加载 2 秒后开始。在中setTimeout()，只要条形宽度不是 100% ，我们setInterval()就会执行该animate()函数。

setTimeout(() => {  let intervalID = setInterval(() => {    if (barWidth === 100) {      clearInterval(intervalID);    } else {      animate();    }  }, 100);//this sets the speed of the animation}, 2000);

在animate()函数内部，我们有另一个setTimeout()在进度条已满时将显示 100% 。

const animate = () => {  barWidth++;  progressBar.style.width = `${barWidth}%`;  setTimeout(() => {    loadingMsg[xss_clean] = `${barWidth}% Completed`;  }, 10100);};

进度条只是您可以使用setTimeout()和创建的众多动画之一setInterval()。您也可以在构建在线游戏时使用这些方法。