JavaScript setTimeout()——如何在 JavaScript 中设置计时器或休眠 N 秒

本教程将通过直观的代码示例帮助你理解内置 JavaScript 方法 setTimeout()。

如何在 JavaScript 中使用 setTimeout()

setTimeout() 方法允许你在经过一定时间后执行一段代码。你可以将该方法视为设置计时器以在特定时间运行 JavaScript 代码的一种方式。

例如，下面的代码将在 2 秒后将 “Hello World” 打印到 JavaScript 控制台：

setTimeout(function(){
    console.log("Hello World");
}, 2000);

console.log("setTimeout() example...");

上面的代码首先将 “setTimeout() example...” 打印到控制台，然后在 JavaScript 执行代码两秒后打印 “Hello World”。

setTimeout() 方法语法如下：

setTimeout(function, milliseconds, parameter1, parameter2, ...);

setTimeout() 方法的第一个参数是你要执行的 JavaScript 函数。传递函数的时候可以直接写函数，也可以引用一个命名函数，如下图：

function greeting(){
  console.log("Hello World");
}

setTimeout(greeting);

接下来，你可以传递 milliseconds 参数，这将是 JavaScript 在执行代码之前等待的时间。

一秒等于一千毫秒，所以如果你想等待 3 秒，你需要传递 3000 作为第二个参数：

function greeting(){
  console.log("Hello World");
}

setTimeout(greeting, 3000);

如果省略第二个参数，则 setTimeout() 将立即执行传递的函数，而无需等待。

最后，你还可以将其他参数传递给可以在函数内部使用的 setTimeout() 方法，如下所示：

function greeting(name, role){
  console.log(`Hello, my name is ${name}`);
  console.log(`I'm a ${role}`);
}

setTimeout(greeting, 3000, "Nathan", "Software developer");

现在你可能会想，“为什么不直接将参数传递给函数呢？”

这是因为如果你像这样直接传递参数：

setTimeout(greeting("Nathan", "Software developer"), 3000);

然后 JavaScript 将立即执行函数而无需等待，因为你传递的是函数调用而不是函数引用作为第一个参数。

这就是为什么如果需要向函数传递任何参数，则需要从 setTimeout() 方法传递它们。

但老实说，作为一名软件开发人员，我从来没有发现需要将额外的参数传递给 setTimeout() 方法，所以不用担心。😉

如何取消 setTimeout 方法

你还可以使用 clearTimeout() 方法阻止 setTimeout() 方法执行该函数。

clearTimeout() 方法需要通过 setTimeout() 返回的 id 才能知道要取消哪个 setTimeout() 方法：

clearTimeout(id);

这是一个 clearTimeout() 方法使用示例：

const timeoutId = setTimeout(function(){
    console.log("Hello World");
}, 2000);

clearTimeout(timeoutId);
console.log(`Timeout ID ${timeoutId} has been cleared`);

如果你有多个 setTimeout() 方法，那么你需要保存每个方法调用返回的 ID，然后根据需要多次调用 clearTimeout() 方法将它们全部清除。

总结

JavaScript setTimeout() 方法是一种内置方法，可让你对某个函数的执行进行计时。你需要以毫秒为单位传递等待的时间量，这意味着等待一秒钟，你需要传递一千毫秒。

要取消 setTimeout() 方法的运行，你需要使用 clearTimeout() 方法，传递调用 setTimeout() 方法时返回的 ID 值。

感谢你阅读本教程

如果你想了解有关 JavaScript 的更多信息，您可能需要查看我的网站 sebhastian.com，我在该网站上发布了 100 多篇有关 JavaScript 编程的教程，所有教程都使用易于理解的解释和代码示例。

这些教程包括字符串操作、日期操作、数组和对象方法、JavaScript 算法解决方案等等。

原文：JavaScript setTimeout() – How to Set a Timer in JavaScript or Sleep for N Seconds，作者：Nathan Sebhastian