还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；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二、setInterval三、requestAnimationFrame四、区别五、结论
一、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 也是重复执行，但每次执行都需要在回调函数内部重新请求。 性能和准确性：
setTimeout 和 setInterval 不太适合复杂的动画，可能导致动画卡顿、不准确。requestAnimationFrame 更适合处理视觉动画，因为它与屏幕刷新同步，有助于减少丢帧现象，提高动画质量。 五、结论
在实现动画或周期性任务时，应优先考虑使用 requestAnimationFrame，因为它能更好地适应各种设备的刷新率，实现更流畅的动画效果。而对于非视觉相关的简单延时任务或固定间隔任务，setTimeout 和 setInterval 更为合适，但需要注意它们的时间精度问题，并合理控制任务执行以防止阻塞UI线程。