深入解析 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 代码。
