深入解析 JavaScript 中的 setTimeout() 和 setInterval()

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

​

✨ 前言

        setTimeout() 和 setInterval() 是 JavaScript 中非常常用的定时函数。合理运用它们可以实现代码的定时执行。

        但 setTimeout() 和 setInterval() 在使用方式和实现原理上有一些不同。本文将详细对比两者的区别,分析使用场景,帮你深入理解定时函数的精髓。

​

✨ 正文

一、setTimeout() 简介

setTimeout() 用来设置一个定时器,该定时器在定时时间到达后执行提供的回调函数。

setTimeout() 的基本语法如下:

let timeoutId = setTimeout(callback, delay);

其中 callback 是定时器触发后需要执行的函数,delay 是时间间隔,单位是毫秒。

setTimeout() 会返回该定时器的 ID。可以通过 clearTimeout() 来取消定时器。

setTimeout()函数用来设置一个定时器,该定时器在设定的毫秒数后执行提供的函数。

setTimeout()函数的语法如下:

let timeoutId = setTimeout(function[, delay, param1, param2, ...])

参数说明:

• function:必需,要执行的函数名或函数对象。
• delay:可选,定时器延迟的毫秒数,默认是0。
• param1,param2:可选,传递给函数的参数。

setTimeout()返回一个timeoutId,标识该定时器,可以传入clearTimeout()来取消定时器。

使用示例:

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

let timeoutId = setTimeout(printHello, 2000);

clearTimeout(timeoutId);

上面代码会在2秒后执行printHello函数。

setTimeout()的一些注意事项:

• 延时时间不是准确时间,可能受其它代码影响。
• 回调函数会阻塞进程,如果回调函数耗时太长会有问题。
• 参数需要正确传递,否则可能会出错。
• 使用后需要清除定时器,否则会占用资源。

综合来说,setTimeout()是一个非常常用的定时函数,但需要注意一些使用细节。

 

二、setInterval() 简介

        setInterval() 也是用来设置定时器的,但是它会每隔一定时间重复执行提供的回调函数。

setInterval() 的基本语法如下:

let intervalId = setInterval(function, delay, param1, param2, ...)

        callback 函数会每隔 delay 毫秒重复执行。和 setTimeout() 一样,它也会返回定时器 ID,可以通过 clearInterval() 来取消定时器。

参数说明:

• function: 必需,要重复调用的函数。
• delay: 可选,每次调用之间的时间间隔,单位是毫秒。
• param1,param2: 可选,传递给函数的参数。

setInterval()会返回一个intervalId,可以用clearInterval()来取消定时器。

使用示例:

let count = 0;
let max = 10;

function printCount(){
  console.log(count);
  count++;
  
  if(count === max){
    clearInterval(intervalId);
  }
}

let intervalId = setInterval(printCount, 1000);

这段代码会每隔1秒调用printCount函数,从0开始重复计数到10,然后清除定时器。

setInterval()的注意事项:

• 间隔时间有可能不准确。
• 回调函数运行时可能会 exceeding 间隔时间。
• 必须清除不再需要的间隔定时器。
• 回调函数耗时太长会影响间隔定时。

总之,setInterval()可以实现定时重复执行代码,但是需要考虑定时不准确、回调函数执行时间等问题。

三、setTimeout() vs setInterval()

setTimeout() 和 setInterval() 主要有以下区别:

• setTimeout() 只执行一次,setInterval() 会重复执行
• setTimeout() 延时时间到了就执行,setInterval() 是从开始时间每隔一段时间就执行
• setInterval() 可能出现累积延迟的问题

不同场景使用:

• 只需要延迟执行可以使用 setTimeout()
• 需要循环执行就使用 setInterval()

使用注意事项

setTimeout() 和 setInterval() 在使用时有以下注意事项:

• 传入的延时时间不是精确时间,受其他任务影响
• 回调函数会阻塞进程,如果耗时太长会有问题
• 参数和调用方式需要正确,否则可能存在逻辑错误
• 必须清除不再需要的定时器,否则会消耗系统资源

替代方案

        比较理想的定时执行方案是使用 requestAnimationFrame() 代替 setTimeout() 和 setInterval()。

        优点是由系统控制次数,循环调用更流畅,性能也更好。

✨ 结语       

        setTimeout() 和 setInterval() 是 JavaScript 实现定时执行非常重要的工具。但是需要注意一些使用问题,例如延时不精确、回调阻塞及资源消耗等。理解它们的实现差异,使用最佳实践,可以编写出性能更好的 JavaScript 代码。

​