还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。
| No. | 内容链接 |
|---|---|
| 1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
| 2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
| 4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 5 | 前端就业宝典 【面试题+详细答案 1000+】 |
一、setTimeout
setTimeout 是 JavaScript 中的一个全局函数，用于在指定的毫秒数后调用一个函数或执行一段代码。此函数返回一个 ID，可用于清除定时器（通过调用 clearTimeout 函数）。
function delayedAlert() {
alert('This was delayed by 2 seconds!');
}
let timeoutId = setTimeout(delayedAlert, 2000);
// 可以在任何时间取消定时器
clearTimeout(timeoutId);
-
详解：
-
setTimeout(func, delay[, arguments])接收两个主要参数：要执行的函数和延迟时间（单位为毫秒）。 - 当指定的延迟时间过去后，指定的函数会被添加到浏览器的事件队列中等待执行，但并不能保证函数会在精确的延迟时间后立即执行，因为浏览器还需要处理其他事件和任务。
- 如果在超时之前又有其他更高优先级的任务（如用户交互或其他的定时器任务），那么该函数的实际执行时间可能会比预期更晚。
-
-
应用场景：
- 超时控制，如登录界面自动跳转、提示信息延迟显示、页面加载后的初始化延迟等。
- 异步编程，模拟异步流程控制。
二、setInterval
setInterval 类似于 setTimeout，但它会每隔指定的毫秒数重复调用一个函数，直到被手动停止。
function repeatedAlert() {
alert('This is repeating every 2 seconds!');
}
let intervalId = setInterval(repeatedAlert, 2000);
// 可以在任何时候停止定时器
clearInterval(intervalId);
-
详解：
-
setInterval(func, delay[, arguments])同样接收两个主要参数，但会周期性地调用函数。 - 同样受事件队列的影响，连续的执行之间可能存在额外的延迟，且若某个周期内的函数执行尚未完成，下一个周期可能不会等待前一个周期结束就开始计时。
-
-
应用场景：
- 定时更新，如实时数据显示、游戏循环、滚动新闻条等需要定期执行的任务。
三、requestAnimationFrame
requestAnimationFrame 是专门针对网页动画的一种高级API，它告诉浏览器你希望执行一个动画，并请求浏览器在下次重绘之前调用指定的回调函数。
function animate(currentTime) {
// 动画代码，currentTime 参数表示当前时间点
// ...
// 请求下一帧动画
requestAnimationFrame(animate);
}
// 开始动画
requestAnimationFrame(animate);
-
详解：
-
requestAnimationFrame(callback)接收一个回调函数作为参数，这个函数会在浏览器下一次重绘之前调用。 - 使用
requestAnimationFrame有助于实现平滑且与浏览器渲染帧率同步的动画，因为它会根据显示器的刷新率调整执行时间，确保动画流畅，同时节省系统资源。 - 回调函数通常会收到一个参数，即当前时间戳，用于计算动画每一帧的变化。
-
-
应用场景：
- 高性能网页动画，如CSS变换、canvas绘制、SVG动画等需要与浏览器渲染同步的视觉变化。
- 优化页面性能，避免过度渲染导致性能下降。
四、区别
-
执行时机：
-
setTimeout和setInterval按照指定的固定时间间隔执行。 -
requestAnimationFrame根据浏览器的刷新频率动态调整执行时间，以保持与屏幕刷新同步。
-
-
重复性：
-
setTimeout是一次性执行，除非在回调函数内部再次调用自己。 -
setInterval会一直重复执行，除非被显式清除。 -
requestAnimationFrame也是重复执行，但每次执行都需要在回调函数内部重新请求。
-
-
性能和准确性：文章来源：https://www.toymoban.com/news/detail-844842.html
-
setTimeout和setInterval不太适合复杂的动画，可能导致动画卡顿、不准确。 -
requestAnimationFrame更适合处理视觉动画，因为它与屏幕刷新同步，有助于减少丢帧现象，提高动画质量。
-
五、结论
在实现动画或周期性任务时，应优先考虑使用 requestAnimationFrame，因为它能更好地适应各种设备的刷新率，实现更流畅的动画效果。而对于非视觉相关的简单延时任务或固定间隔任务，setTimeout 和 setInterval 更为合适，但需要注意它们的时间精度问题，并合理控制任务执行以防止阻塞UI线程。文章来源地址https://www.toymoban.com/news/detail-844842.html
到了这里，关于setTimeout、setInterval、requestAnimationFrame：特点、区别、应用场景的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
