介绍

双方setTimeout()并setInterval()都内置在设定的时间上的文档对象模型的全局对象安排任务的方法。setTimeout()在指定的延迟后调用传入的函数一次，而setInterval()在指定的时间连续调用一个。由于 JavaScript 是一种单线程语言，这两种方法都允许您的代码异步运行。

在本文中，您将了解如何在您的 JavaScript 项目中实现setTimeout()和setInterval()。

申请 setTimeout()

该setTimeout()方法接受两个参数：回调函数和以毫秒为单位的延迟，并调用该函数一次。

在您的index.js文件中，实现一个setTimeout()方法并传入一个匿名函数作为第一个参数，并传入一个以毫秒为单位的数字作为第二个参数：

setTimeout(() => {
  console.log('Hello World!');
}, 1000);

延迟1000毫秒（相当于一秒）后，控制台将打印出字符串Hello World!。

您还可以全局定义一个函数并将其setTimeout()作为第一个参数传入。

在您的index.js文件中，在全局空间中定义一个函数并在setTimeout()方法内传入函数标签：

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

setTimeout(greeting, 1000);

延迟一秒钟后，控制台将注销字符串Hello World!。

注意：您不应调用传入的函数setTimeout()。相反，插入函数标签作为第一个参数。

该setTimeout()方法可以采用额外的可选参数，并在指定的延迟后将这些参数传递给回调函数。在您的index.js文件中，将其他参数应用到您的setTimeout()方法中：

function animal(animalName, punctuation = '.') {
  const name = animalName.charAt(0).toUpperCase() + animalName.slice(1);

  console.log(`${name}`${punctuation});
}

setTimeout(animal, 2500, 'shark', '!');

2.5 秒后，控制台将打印出消息，Shark!。方法中的附加参数setTimeout()会覆盖animal回调函数中的默认参数。

现在您已经查看了该setTimeout()方法，让我们看看另一种在 JavaScript 中创建异步调用的方法。

申请 setInterval()

与 类似setTimeout()，该setInterval()方法接受两个参数：回调函数和以毫秒为单位的延迟。该方法还接受传递给回调函数的附加参数。不同之处在于该setInterval()方法会定期调用回调函数，并在调用之间具有指定的延迟。

在您的index.js文件中，定义一个增加数字并记录该值的函数：

let i = 0;

function increment() {
  i++;
  console.log(i);
}

setInterval(increment, 1000);

increment传入您的setInterval()方法的回调函数将每隔一秒重复运行您的代码，并将每个后续数字打印到控制台。

Output
1
2
3
...

由于setInterval()对回调函数的每个连续调用应用延迟，让我们考虑何时使用 over 方法setTimeout()。

setTimeout()递归使用

为了更好地控制定义指定延迟的开始，您可以setTimeout()递归地使用该方法而不是setInterval()。递归方法setTimeout()允许您的任务完全控制延迟何时开始。

在您的index.js文件中，定义一个递增数字并应用递归setTimeout()方法的函数：

let i = 0;

function increment() {
  i++;
  console.log(i);
}

let timer = setTimeout(function myTimer() {
  increment();
  timer = setTimeout(myTimer, 1000);
}, 1000);

请注意您如何myTimer在第一次调用setTimeout()方法的主体内定义回调函数。该变量timer将其值重新分配给该setTimeout()方法的第二次调用，并在调用该方法并将该myTimer函数作为第一个参数传递时创建递归方法。每次递归调用时，控制台都会无延迟地记录一个递增的数字，因为这两种setTimeout()方法都有第二个参数1000.

既然您已经分析了集成这两种方法的方法，让我们来看看如何终止调用。

使用clearTimeout()和clearInterval()

要取消一个setTimeout()方法，您可以求助于clearTimeout()在您的setTimeout()调用主体中传递的方法。该clearTimeout()方法接受一个回调函数作为参数。

在您的index.js文件中，定义一个函数并将该clearTimeout()方法传递到您的调用主体中setTimeout()：

function animal(animalName, punctuation = '.') {
  const name = animalName.charAt(0).toUpperCase() + animalName.slice(1);

  console.log(`${name}${punctuation}`);
}

const animalTimer = setTimeout(animal, 800, 'shark', '!');

setTimeout(() => {
  clearTimeout(animalTimer);
}, 250);

该变量animalTimer将其值分配给以setTimeout()您的animal函数作为回调的方法调用和延迟800毫秒的第二个参数。

您对该setTimeout()方法的第二次调用接受clearTimeout()匿名函数体内的方法，以及250毫秒的延迟。当您设置clearTimeout()方法时，没有任何值会登录到控制台，因为方法调用和250毫秒延迟都会取消animalTimer变量中的值。在第二次调用该setTimeout()方法时增加毫秒数会将值记录到控制台并在延迟满足后终止实例。

要取消一个setInterval()方法，您可以应用该clearInterval()方法。与 类似clearTimeout()，该clearInterval()方法接受一个回调函数作为参数。

在您的index.js文件中，使用clearTimeout()调用正文中的方法setInterval()：

let i = 0;

function increment() {
  i++;
  console.log(i);
}

const incrementTimer = setInterval(increment, 1000);

setInterval(() => {
  clearInterval(incrementTimer);
}, 3000)

在这里，变量incrementTimer()将调用存储setInterval()为它的值。对您的setInterval()方法的第二次调用定义了一个匿名函数并设置了3000毫秒的延迟。调用还会将变量作为参数传入clearInterval()方法incrementTimer。之后3000毫秒，控制台将记录的增加值和setInterval()方法将终止一旦延迟满足。

结论

在本文中，您了解到当 JavaScript 逐行读取代码时，setTimeout()和setInterval()方法为您提供了一种异步运行代码的解决方案，并根据您的判断对函数调用进行计时。

setInterval()将在指定的时间内连续执行。setTimeout()执行一次，但可以递归使用以等待回调以指示何时应等待再次执行。递归方法对于需要确保任务可能需要比延迟时间更长的时间才能再次运行的情况很有用。