关于requestAnimationFrame与setInterval的一点差异

最新推荐文章于 2025-04-17 20:23:37 发布
转载 最新推荐文章于 2025-04-17 20:23:37 发布 · 320 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/mrzhu/p/9300406.html

本文探讨了requestAnimationFrame与setInterval的区别，特别是在浏览器前后台切换时的行为差异。requestAnimationFrame更适用于需要频繁更新视觉效果的应用场景，因为它能感知浏览器的状态变化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

requestAnimationFrame与setInterval都可以实现循环触发事件，但是setInterval是基于时间的，而requestAnimationFrame是基于帧数的，在我的一次开发弹幕的项目中，在一开始使用了setInterval来切换弹幕的位置，起初并没有什么问题，但是当浏览器切换回后台后，就会出现弹幕积攒过多的原因，因为我随不断的创建新的弹幕进行移动（为了考虑性能，会优先使用已经被废弃的弹幕盒），当浏览器切换到后台后，浏览器本身已经不进行页面渲染了，而我的定时器却在不断的创建新的弹幕以用来发射，当用户将浏览器切换到前台时候，会看到在一段时间内积攒的弹幕堆积到一起，最后发现是因为 浏览器在后台的时候 定时器还是会不断的跑的，但是在当前这种情况下 我可能并不是很希望弹幕系统继续运行下去，我希望知道浏览器当前状态是在前台还是后台，如果是后台的话 则暂停弹幕，然而在微信中并没有看到相关的机制，后来看到了requestAnimationFrame，requestAnimationFrame也是不断的循环执行事件，但是他是按帧执行的，而且有一个好处是 当浏览器切换到后台后，requestAnimationFrame是不会再去执行事件了。这和setInterval有着本质的差异。而requestAnimationFrame之所以在浏览器进入后台不去执行的原因 ，应该是和浏览器进入后台后不去渲染界面有关，因为渲染界面后需要逐帧绘制，当不进行页面的选然后，也就没必要去执行帧操作了，所以requestAnimationFrame也不会去执行了

 

如果上述推论是正确的，那可以基此判断出setTimeout在浏览器进入后台后依然会运行，就像setInterval一样

转载于:https://www.cnblogs.com/mrzhu/p/9300406.html

JS中的定时器requestAnimationFrame 、setTimeout 和setInterval
qq_34754747的博客
04-13 4039
1. requestAnimationFrame定时循环接口 1.1 requestAnimationFrame (rAF) 通知浏览器某个JS代码段在执行动画 浏览器会在每帧即将绘制之前，将这段代码先执行。 requestAnimationFrame和屏幕刷新是同步的，也就是说屏幕每刷新一次，requestAnimationFrame就触发一次。不同显示器的刷新率不同 那么如果要实现一个...
requestAnimationFrame
weixin_72737562的博客
04-01 434
在工作中如果遇到必须得精确控制接口或者倒计时的业务，或者是优化动画效果；我这次是需要做定时获取后端接口，通过计算得出开奖时间倒计时，计算出福袋的精确开奖时间，并且在页面上会有倒计时，这个时候如果使用setInterval调后端接口计算倒计时，时间长了你就会发现，它的倒计时和后端返回的时间不同步，一般来说会慢于后端的精确时间，这就是与屏幕刷新不同步，导致无法与后端时间精准同步。是浏览器提供的专门用于动画处理的 API，它通过系统级的时间间隔控制，实现更高效、流畅的动画效果。
前端开发必备：requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
06-21 5391
它会将回调函数加入到浏览器下一次重绘之前要执行的队列中。setInterval：与 setTimeout 类似，setInterval 也会将要执行的代码或函数放入事件循环队列中，但它在指定的时间间隔后会一直重复执行，直到 clearInterval 被调用或窗口被关闭。函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。
requestAnimationFrame、setInterval、setTimeout 对比
2201_75673611的博客
07-18 536
在前端开发中，requestAnimationFrame、setInterval、setTimeout 是三个常用的定时器函数，它们各自具有不同的功能和适用场景。功能：requestAnimationFrame 是浏览器用于定时循环操作的一个接口，主要用于按帧对网页进行重绘，以支持各种网页动画效果（如DOM动画、Canvas动画、SVG动画、WebGL动画）。工作原理：setTimeout 将函数推入异步任务队列，等待当前执行栈清空后，根据设定的时间间隔（可能会有延迟）执行该函数。
JavaScript中计时器requestAnimationFrame、setTimeout、setInterval、setImmediate的使用和区别
JackChan
04-04 1222
JavaScript中计时器requestAnimationFrame、setTimeout、setInterval、setImmediate的使用和区别
setTimeout&setInterval&requestAnimationFrame
警警的博客
04-17 1124
我们无法完全用纯 JavaScript 实现它们（因为它们依赖底层事件循环机制）。• 理论上模拟 60Hz，但实际可能因主线程阻塞导致延迟。是浏览器 API，用于在下一帧渲染前执行回调（约。• 浏览器最小延迟限制（4ms）可能破坏时序。，即使前一帧未完成也可能触发新回调，导致堆积。• 高频更新 UI（如游戏、实时图表）。：按屏幕刷新率（如 60Hz）执行，的调用，合并同一帧内的多次更新。的频率执行（匹配屏幕刷新率）。• 后台标签页仍执行，浪费资源。• 自动匹配刷新率，流畅且节能。
BOM系列第二篇之定时器requestAnimationFrame
09-01
本文将详细介绍requestAnimationFrame的工作原理、特点以及如何使用，同时对比传统定时器setTimeout和setInterval的差异。 首先，定时器是JavaScript动画的基础。为了实现平滑的动画效果，我们需要在合适的时间间隔...
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索，与解决方案！
09-05
标题中的问题涉及到JavaScript的`setInterval`函数在不同浏览器，特别是火狐（Firefox）和Chrome中的行为差异。当用户在浏览器中切换标签时，`setInterval`的行为可能会变得不一致，这在描述中有所体现。IE浏览器...
html5新增的定时器requestAnimationFrame实现进度条功能
09-27
HTML5新增的`requestAnimationFrame`是一个专门针对动画优化的定时器，它的引入主要是为了解决传统定时器`setTimeout`和`...你可以尝试添加`setTimeout`和`setInterval`的实现，对比它们在性能和效果上的差异。
缓动函数requestAnimationFrame 更好的实现浏览器经动画
12-09
在过去的动画实现中，我们通常使用 `setTimeout` 或 `setInterval` 来每隔一定时间更新屏幕，但现在，`requestAnimationFrame` 提供了一个更加高效的方式。 **为什么使用requestAnimationFrame？** 1. **优化资源...
requestAnimationFrame、setTimeout、setInterval总结与区别
qq_41400354的博客
01-23 725
setTimeout： setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。 setTimeout(()=> {执行代码段}, time延迟时间),在执行前可以手动取消,setTimeout函数之前后会返回ID值，利用clearTimeout可以取消定时器 setInterval： ...
requestAnimationFrame 和 setInterval
Future1994的博客
09-27 732
https://www.jianshu.com/p/a4edf06b2f19 我们平时实现JavaScript动画效果时离不开setInterval或者setTimeout函数，这两个函数本质上相同的。 以setInterval为例，他的作用是以相同的时间间隔执行某个操作，这个时间可以自定义，利用这个特性我们就可以让然也元素跑起来。 可是这个函数有个毛病，他和显示器的刷新频率无法对应。比如说显示器每100毫秒刷新一次，setInterval函数设置的间隔执行也是100毫秒，可是我们没有办法保证显示频率
详解requestAnimationFrame，并模拟setInterval效果
杨树林er的博客
01-18 2115
一、前言 由于最近在做一些新尝试，瞄上了HTML5的新特性requestAnimationFrame，发现真是好用，比计时器好了不知…但话不能说太满，各有各的好处吧…，下面就来大致详细简单聊聊requestAnimationFrame到底是个啥？怎么用？有啥特色？ 二、概述 requestAnimationFrame字面意思：请求动画帧。官方解释：帧动画。就是可以一帧一帧的执行动画。 那么问题来了，这个一帧的执行频率是多久？答案是：与屏幕的刷新频率同步。 也可以认为：让浏览器在显示器屏幕下次刷新时，执行一帧
window的定时器方法哪些 setInterval()  requestAnimationFrame()
yinge0508的博客
09-10 409
定时器方法第一个：setInterval() setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 定时器方法第二个：requestAnimationFrame()参数是将要被调用函数的函数名，requestAnimationFrame()调用一个函数不是立即调用而是向浏览器发起一个执行某函数的请求， 什么时候会执行由浏览器决定，一般默认保...
vue项目中引入循环执行setInterval或者requestAnimationFrame的用法等
weixin_30640769的博客
07-03 651
项目中循环计时处理某些方法的情况还是比较常见的，一般会用setInterval来处理，但是这个方法会似的页面卡顿等使用体验不好。 所以就使用浏览器提供的requestAnimationFrame方法，window.requestAnimationFrame()告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，...
关于js setInternal 与 requestAnimationFrame
ly1074106000的博客
12-15 683
首先说下setInternal的用法 setInterval(function(){ console.log(123); }, 30); 每间隔30毫秒打印一次 requestAnimationFrame function animloop() { console.log(123); window.requestAnimationFrame(animloop); } 可以看到requestAnimationFrame是不需要设置时间间隔的。 相当一部分的浏览器的显示频率是16.7ms
setTimeout/setInterval与requestAnimationFrame的区别？
weixin_40851188的博客
04-29 3958
提到 setTimeout/setInterval 以及 requestAnimationFrame，大家的第一反应是动画相关的两个 API。 什么是web 动画 我们来谈谈什么是动画。动画其实是一种假象，是一种不连续的运动以帧的形式呈现给我 们的东西。在二十世纪，通常人们观看的电影其实就是通过胶片记录和投影的。它是以每 秒至少 24 帧的速度形成的视觉上的运动起来的假象。NTSC 广播的标准...
setTimeout, setInterval 与 requestAnimationFrame 隐藏的各种坑
热门推荐
研究与专注
08-31 1万+
使用 JavaScript 做动画时，或者做与时间有关的事情，你有三个选择：`setTimeout`, `setInterval` 和 `requestAnimationFrame` ，这三个函数有点类似，也有点区别，也有一些坑等你来踩。
setInterval方法与requestAnimationFrame 取舍
Fly to sky
05-08 2008
setInterval方法与requestAnimationFrame方法的区别较为微妙。一方面，最明显的差别表现在setInterval可以手动设定FPS，而requestAnimationFrame则会自动设定FPS；但另一方面，即使是setInterval也不能保证按照给定的FPS执行，在浏览器处理繁忙时，很可能低于设定值。当浏览器达不到设定的调用周期时，requestAnimationFr
setinterval
最新发布
06-27
<think>我们正在讨论JavaScript的setInterval方法，而用户询问它是否是“单向绑定”。首先，我需要澄清用户的问题。在之前的对话中，用户询问了Vue.js中的v-bind是否为单向绑定，而现在他们转向了JavaScript的setInterval方法，并使用了相同的术语“单向绑定”。这可能是一个术语的误用，因为“单向绑定”通常用于描述数据流（如在前端框架中），而setInterval是一个定时器函数，与数据绑定无关。根据提供的引用，用户引用的内容都是关于setInterval的使用、this指向问题、以及用setTimeout模拟setInterval的实现。没有任何引用提到“单向绑定”与setInterval相关。因此，我需要纠正用户的术语，并解释setInterval的实际功能。我的回答应该：1.明确setInterval与数据绑定无关，解释可能存在的术语混淆。2.详细解释setInterval的功能和使用方式。3.根据引用内容，重点说明setInterval的常见问题，如this指向问题和可靠性问题，并提供解决方案（如使用bind或箭头函数）。4.对比setInterval和setTimeout，解释为什么有时推荐用setTimeout模拟setInterval（引用[1]和[4]）。5.提供代码示例说明基本用法和注意事项。回答结构：-第一部分：澄清setInterval不是单向绑定，并解释其实际功能。-第二部分：详细说明setInterval的使用方式，包括语法、参数和基本示例。-第三部分：讨论常见问题（this指向和可靠性）及解决方法。-第四部分：提供替代方案（使用setTimeout模拟setInterval）并解释优势。-第五部分：总结使用建议。最后，生成相关问题，引导用户深入了解。注意：引用内容要自然地融入回答，并在相关位置标注引用标记。</think>### JavaScript `setInterval` 功能详解及与"单向绑定"的澄清 #### 1. **术语澄清：`setInterval` 与数据绑定无关** - **重要说明**：`setInterval` **不是单向绑定**，它与数据绑定概念完全无关。 - "单向绑定"是前端框架（如 Vue/React）中的数据流控制概念，而 `setInterval` 是 JavaScript 原生的**定时器 API**，用于周期性执行函数[^1][^2]。 - 混淆可能源于：某些代码中会**在 `setInterval` 内更新数据**，但这属于定时触发机制，而非数据绑定。 #### 2. `setInterval` 核心功能 ```javascript // 基础语法 const timerId = setInterval(callback, delay, [arg1], [arg2], ...); ``` - **功能**：每隔 `delay` 毫秒重复执行 `callback` 函数 - **参数**： - `callback`：要执行的函数 - `delay`：间隔时间（单位毫秒） - 可选参数：传递给 `callback` 的额外参数 - **返回值**：唯一计时器 ID（用于 `clearInterval` 停止） **基础示例**： ```javascript // 每秒输出当前时间 const timer = setInterval(() => { console.log(new Date().toLocaleTimeString()); }, 1000); // 5秒后停止 setTimeout(() => clearInterval(timer), 5000); ``` #### 3. 关键特性与注意事项 - **`this` 指向问题**（常见陷阱） 在类或对象方法中使用时，`callback` 内的 `this` 默认指向全局对象（浏览器中为 `window`），而非当前实例： ```javascript class Counter { constructor() { this.count = 0; } start() { // ❌ 错误：this 指向错误 setInterval(function() { console.log(this.count); // 输出 undefined }, 1000); // ✅ 正确：使用 bind 或箭头函数[^2][^3] setInterval(() => { console.log(this.count); // 正常输出 }, 1000); } } ``` - **可靠性问题与替代方案** `setInterval` 可能因事件循环阻塞导致执行间隔不稳定。推荐用 `setTimeout` 模拟实现更可靠的间隔执行[^1][^4]： ```javascript function reliableInterval(fn, delay) { let timerId; const execute = () => { fn(); timerId = setTimeout(execute, delay); // 递归调用 }; timerId = setTimeout(execute, delay); return () => clearTimeout(timerId); // 返回停止函数 } ``` #### 4. `setInterval` vs `setTimeout` | 特性 | `setInterval` | `setTimeout` 模拟 | |--------------------|-----------------------------------|--------------------------------| | **执行机制** | 固定间隔执行 | 前次执行完毕后再调度下一次[^4] | | **误差累积** | 可能因阻塞导致延迟累积 | 无累积误差 | | **代码复杂度** | 简单 | 需手动递归实现 | | **适用场景** | 对间隔精度要求不高的简单任务 | 需精确控制执行时序的任务 | #### 5. 最佳实践建议 - 使用箭头函数或 `bind` 绑定正确的 `this` 上下文[^2][^3] - 始终在组件卸载/不再需要时调用 `clearInterval(timerId)` 避免内存泄漏 - 对时序敏感的任务优先选择 `setTimeout` 递归方案[^1][^4] - 避免在 `callback` 中执行耗时操作，防止阻塞事件循环 > **总结**：`setInterval` 是 JavaScript 的周期性定时器，**与数据绑定无关**。其主要功能是重复执行代码，需注意 `this` 绑定和时序可靠性问题。对于需要精确控制的任务，推荐使用 `setTimeout` 递归实现[^1][^4]。 --- ### 相关问题 1. 如何解决 `setInterval` 在异步函数中的执行顺序问题？ 2. `setInterval` 和 `requestAnimationFrame` 在动画场景中的性能差异是什么？ 3. 为什么在 React/Vue 组件中使用 `setInterval` 需要额外清理操作？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值