setTimeout() 和 setInterval()

最新推荐文章于 2022-11-10 16:58:02 发布

原创最新推荐文章于 2022-11-10 16:58:02 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文详细介绍了JavaScript中的setTimeout和setInterval函数，包括它们的工作原理、参数使用、如何传递参数以及如何清除定时器。示例代码展示了如何使用这两个函数执行匿名或已命名的函数，以及如何在函数中传递参数。此外，还讨论了setInterval用于周期性执行任务的情况，并给出了创建实时数字时钟的例子。最后，提到了clearTimeout和clearInterval用于取消定时器执行的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setTimeout() 在指定的时间后执行一段特定代码

它需要如下参数:

要运行的函数，或者函数引用。
表示在执行代码之前等待的时间间隔(以毫秒为单位，所以1000等于1秒)的数字。如果指定值为0(或完全省略该值)，函数将尽快运行（参阅下面的注释，了解为什么它“尽快”而不是“立即”运行）。稍后详述这样做的原因。
更多的参数：在指定函数运行时，希望传递给函数的值。

执行匿名函数之前等待两秒钟:

let myGreeting = setTimeout(function() {
  alert('Hello, Mr. Universe!');
}, 2000)

我们指定的函数不必是匿名的。我们可以给函数一个名称，甚至可以在其他地方定义它，并将函数引用传递给 setTimeout() 。以下两个版本的代码片段相当于第一个版本:

// With a named function
let myGreeting = setTimeout(function sayHi() {
  alert('Hello, Mr. Universe!');
}, 2000)

// With a function defined separately
function sayHi() {
  alert('Hello Mr. Universe!');
}

let myGreeting = setTimeout(sayHi, 2000);

传递参数给setTimeout()

我们希望传递给setTimeout()中运行的函数的任何参数，都必须作为列表末尾的附加参数传递给它。

例如，我们可以重构之前的函数，这样无论传递给它的人的名字是什么，它都会向它打招呼：

function sayHi(who) {
  alert('Hello ' + who + '!');
}

人名可以通过第三个参数传进 setTimeout() ：

let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');

清除超时

最后，如果创建了 timeout，您可以通过调用clearTimeout()，将setTimeout()调用的标识符作为参数传递给它，从而在超时运行之前取消。要取消上面的超时，你需要这样做：

clearTimeout(myGreeting);

setInterval()

当我们需要在一段时间之后运行一次代码时，setTimeout()可以很好地工作。

这就是setInterval()的作用所在。这与setTimeout()的工作方式非常相似，只是作为第一个参数传递给它的函数，重复执行的时间不少于第二个参数给出的毫秒数，而不是一次执行。您还可以将正在执行的函数所需的任何参数作为 setInterval() 调用的后续参数传递。

让我们看一个例子。下面的函数创建一个新的Date()对象，使用toLocaleTimeString()从中提取一个时间字符串，然后在UI中显示它。然后，我们使用setInterval()每秒运行该函数一次，创建一个每秒更新一次的数字时钟的效果。

function displayTime() {
   let date = new Date();
   let time = date.toLocaleTimeString();
   document.getElementById('demo').textContent = time;
}

const createClock = setInterval(displayTime, 1000);

像setTimeout()一样, setInterval() 返回一个确定的值，稍后你可以用它来取消间隔任务。

清除intervals

setInterval()永远保持运行任务,除非我们做点什么——我们可能会想阻止这样的任务,否则当浏览器无法完成任何进一步的任务时我们可能得到错误, 或者动画处理已经完成了。我们可以用与停止超时相同的方法来实现这一点——通过将setInterval()调用返回的标识符传递给clearInterval()函数:

const myInterval = setInterval(myFunction, 2000);

clearInterval(myInterval);