原文：JavaScript Wait – How to Sleep N Seconds in JS with .setTimeout()，作者：Dionysia Lemonaki

有时你可能想延迟代码的执行。

你可能需要某些行的代码在你明确指定的未来某个时间点执行，而不是所有的代码同步执行。

类似这样的事情在 JavaScript 中是可以实现的。

在这篇文章中，你将了解 setTimeout() 方法——它是什么以及如何在你的程序中使用它。

以下是我们在这篇快速指南中要介绍的内容：

JavaScript 中的 setTimeout() 是什么

setTimeout() 是窗口对象的一个异步方法，它的作用是设置一个将执行一个动作的计时器。该定时器表示一个特定的时刻，届时将有一个特定动作的触发。

由于 setTimeout() 是窗口对象的一部分，它也可以被写成 window.setTimeout()。也就是说，window 前缀是隐含的，因此通常被省略和不指定。

setTimeout() 方法语法概览

setTimeout() 方法的基本语法是这样的：

setTimeout(function_name, time);

让我们把它分解一下：

  • setTimeout() 是一个用于创建定时事件的方法
  • 它接受两个必要的参数
  • function_name 是第一个必要参数，它是一个回调函数的名称，包含你想要执行的代码，该函数的名称是对包含实际代码块的函数定义的一个引用和指针。
  • time 是第二个必要参数，它以毫秒为单位定义（作为参考，1 秒 = 1000 毫秒），它代表了程序为执行该函数而必须等待的指定时间

总的来说，这意味着 setTimeout() 将执行一次包含在给定函数中的代码，并且只在指定的时间后执行。

在这一点上，值得一提的是，你可以将一个匿名函数传递给 setTimeout()，而不是传递一个函数名。

当函数不包含很多行代码时，这很方便。

匿名函数意味着你直接将代码作为第一个参数嵌入到 setTimeout() 中，而不像上面看到的那样引用函数名。

setTimeout(function() {
    // 这里是函数代码
}, time);

另一件要注意的事是 setTimeout() 返回一个 timeoutID——一个正整数，用来标识由 setTimeout() 创建的定时器。

稍后你会看到 timeoutID 的值是如何被用于 clearTimeout() 方法的。

如何在 JavaScript 中等待 N 秒

让我们来看看 setTimeout() 是如何应用的一个例子：

//这行代码首先执行

console.log("Where can I learn to code for free and get a developer job?");

//这一行表示，一旦过了 3ms，函数定义将被执行

setTimeout(codingCourse, 3000);


//函数定义

function codingCourse() {
  console.log("freeCodeCamp");
}
js2

JavaScript 代码从上到下执行。

第一行代码，console.log("Where can I learn to code for free and get a developer job?");，一旦我按下运行，就会立即执行。

第二行代码表明，在 codingCourse() 函数中的代码被执行之前，需要有 3000ms（或 3 秒）的预定延迟。

一旦过了 3000ms，你会看到函数里面的代码（console.log("freeCodeCamp")）执行成功。

让我们看一下另一个例子：

console.log("Good Morning!");

setTimeout(function() {
  console.log("Good Night!");
}, 1000);

console.log("Good Afternoon!");
js4-1

在上面的例子中，第一行代码，console.log("Good Morning!");，立即执行。

console.log("Good Afternoon!"); 这一行也是如此，尽管它是文件中的最后一行代码。

setTimeout() 中的代码表明，在运行前需要有一秒钟的延迟。

然而，在这段时间内，文件中其他代码的执行并没有被搁置。

相反，该行被暂时跳过，并执行 console.log("Good Afternoon!"); 一行。

一旦这一秒过去了，setTimeout() 中的代码就会运行。

你还可以向 setTimeout() 传递更多的参数。

在下面的例子中，greeting 函数接受两个参数，phrase 和 name。

function greeting(phrase,name) {
  console.log(`${phrase}, my name is ${name}` );
}

setTimeout(greeting, 3000,"Hello world","John Doe");

然后这些被传递给 setTimeout() 方法，一旦函数被调用，将有 3 秒的延迟。

js6

如何使用 JavaScript 中的 clearTimeout() 方法

如果你想取消已经创建的定时事件怎么办？

你能够通过使用 clearTimeout() 方法停止 setTimeout() 中的代码运行。这里就是前面提到的 timeoutID 派上用场的地方。

clearTimeout(timeoutID)

其工作方式是，你必须将每次调用 setTimeout() 返回的 timeoutID 保存在一个变量中。

然后，timeoutID 被用作 clearTimeout() 的一个参数，如下图所示：

let timeoutID = setTimeout(function(){
    console.log("Good Night");
}, 2000);

clearTimeout(timeoutID);

console.log("Good Morning!");
js5

现在，setTimeout() 中的代码不执行。

setTimeout 和 setInterval 有什么区别

setTimeout() 和 setInterval() 有相似的语法。

这是 setInterval() 的语法：

setInterval(function_name, time);

然而，互换使用它们并不是一个好主意，因为它们的工作方式不同。

setTimeout() 触发一次行动，而 setInterval() 则重复触发一次行动。

在下面的例子中，函数 codingCourse 每三秒被调用一次：

console.log("Where can I learn to code for free and get a developer job?");


setInterval(codingCourse, 3000);


//函数定义
function codingCourse() {
  console.log("freeCodeCamp");
}
js3

当你想定期重复一些事情的时候，setInterval() 是一个很好的选择。

总结

你现在知道了 setTimeout() 的工作原理以及如何在 JavaScript 中创建定时事件的基本知识。

要学习更多关于 JavaScript 的知识，请查看 freeCodeCamp 的 JavaScript 算法和数据结构认证。

这是一个免费的、精心设计的、结构化的交互式课程，你还将构建 5 个项目来申请认证，并通过将你的新技能用于实践来巩固你的知识。

谢谢你阅读本文！