当前位置：首页 > news >正文

setTimeout、setInterval、requestAnimationFrame的使用以及区别

news 2025/7/19 10:35:51

setTimeout、setInterval 和 requestAnimationFrame 都是 JavaScript 中用于处理异步任务的函数，但它们在用途、执行机制和精度方面存在显著差异。让我们分别解释它们的特点、区别和用法：

1. `setTimeout`

特点：

一次性执行：在指定的延迟时间后执行一次函数。
延迟单位：以毫秒（ms）为单位。
不精确：实际执行时间可能略晚于指定时间，因为其依赖于浏览器的任务队列。
用途：适用于需要在一段时间后执行某个任务的场景，例如延迟加载、动画等。

用法：

setTimeout(function, delay);

function：要执行的函数。
delay：延迟时间，单位为毫秒。

示例：

console.log('Start');setTimeout(() => {console.log('Executed after 2 seconds');
}, 2000);console.log('End');

输出：

Start
End
Executed after 2 seconds

2. `setInterval`

特点：

重复执行：每隔指定的时间间隔重复执行函数。
延迟单位：以毫秒（ms）为单位。
不精确：实际执行时间可能不准确，尤其是在浏览器忙碌时，可能会累积延迟。
用途：适用于需要周期性执行任务的场景，例如定时器、轮询等。

用法：

setInterval(function, delay);

function：要执行的函数。
delay：时间间隔，单位为毫秒。

示例：

let counter = 0;const intervalId = setInterval(() => {console.log('Counter:', counter++);if (counter >= 5) {clearInterval(intervalId); // 停止定时器}
}, 1000);

输出：

Counter: 0
Counter: 1
Counter: 2
Counter: 3
Counter: 4
Counter: 5

3. `requestAnimationFrame`

特点：

与浏览器刷新率同步：在浏览器下一次重绘之前执行回调函数，确保动画流畅。
高精度：实际执行时间与浏览器的刷新率（通常是 60fps）同步。
节能：当页面不可见时，requestAnimationFrame 会暂停调用，节省资源。
用途：适用于动画、游戏等需要高帧率的场景。

用法：

requestAnimationFrame(callback);

callback：要执行的函数，会在下一次重绘之前调用。

示例：

function animate() {// 动画逻辑console.log('Animating...');requestAnimationFrame(animate); // 递归调用，实现动画循环
}requestAnimationFrame(animate);

输出：

Animating...
Animating...
Animating...
...

区别总结：

特性	`setTimeout`	`setInterval`	`requestAnimationFrame`
执行次数	一次性	重复执行	重复执行（直到手动停止或页面不可见）
执行时机	延迟后执行	每隔固定时间执行	与浏览器重绘同步执行
精度	不精确（可能延迟）	不精确（可能累积延迟）	高精度（与刷新率同步）
节能性	无	无	页面不可见时自动停止
适用场景	延迟任务、超时处理	周期性任务、轮询	动画、游戏、高帧率任务