requestAnimationFrame 和setTimeout 的区别

最新推荐文章于 2024-06-21 08:42:30 发布
最新推荐文章于 2024-06-21 08:42:30 发布
阅读量267 收藏
点赞数
分类专栏： 原理 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42875598/article/details/117332672
版权
本文对比了setTimeout与requestAnimationFrame在宏任务执行中的区别，指出setTimeout在微任务完成后立即执行，而requestAnimationFrame则确保每帧执行一次。
摘要由CSDN通过智能技术生成

相同点：都是宏任务
不同点：一般先执行setTimeout 然后再执行requestAnimationFrame，setTimeout是微任务结束后就立刻执行的主任务（有可能是多帧执行一次或者一帧执行多次），requestAnimationFrame 是每一帧执行一次

coding者
关注
专栏目录
JS中的定时器requestAnimationFrame 、setTimeout 和setInterval
qq_34754747的博客
04-13 3907
1. requestAnimationFrame定时循环接口 1.1 requestAnimationFrame (rAF) 通知浏览器某个JS代码段在执行动画 浏览器会在每帧即将绘制之前，将这段代码先执行。 requestAnimationFrame和屏幕刷新是同步的，也就是说屏幕每刷新一次，requestAnimationFrame就触发一次。不同显示器的刷新率不同 那么如果要实现一个...
setInterval、setTimeout、requestAnimationframe对比
weixin_43276913的博客
04-06 318
定时器方法： setTimeout(): 设定时间后执行函数 setInterval(): 每隔一段时间执行一次函数 requestAnimationFrame(): 与屏幕的刷新频率保持一致 三者对比： setTimeout和setInterval为异步事件，内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器任务队列中等待执行的时间；如果任务队列中有其它事件，那么要等...
requestAnimationFrame 和 setTimeout 的区别
qq_45803050的博客
09-18 1440
requestAnimationFrame 和 setTimeout 的区别
setTimeout与requestAnimationFrame的区别
qq_44441669的博客
11-12 870
这两个东西是和动画相关的两个api 什么是动画？动画其实是一种假象！是一种不连续的运动已帧的形式呈现给我们的东西。在二十一世纪，通常人们观看的电影其实就是通过胶片记录和投影的。他们是以每秒至少24帧的速度形成的视觉上的运动起来的假象。NTSC广播的标准的帧速率为23.975FPS，而PAL的形式为25FPS。 FPS可以理解为我们常说的“刷新率（单位为Hz）”，例如我们装机选购显卡和显示器时候，都会注意到刷新率。一般我们设置缺省刷新率都在75Hz（即75帧/秒）以上。例如：75Hz的刷新率也就是指屏幕一秒内
setTimeout 与 requestAnimationFrame 的区 别
weixin_49140057的博客
12-30 258
** 提到 setTimeout 以及 requestAnimationFrame，大家的第一反应是动画相关的两个 API。 ** 我们来谈谈什么是动画。动画其实是一种假象，是一种不连续的运动以帧的形式呈现给我 们的东西。在二十世纪，通常人们观看的电影其实就是通过胶片记录和投影的。它是以每 秒至少 24 帧的速度形成的视觉上的运动起来的假象。NTSC 广播的标准的帧速率为 23.975FPS，而 PAL 制式的为 25FPS。 FPS 可以理解为我们常说的“刷新率（单位为 Hz）”，例如我们常在游戏里说的“
setTimeout与requestAnimationFrame的一道题
qingliuFu的博客
06-14 746
问以下代码的执行的可能结果有几种？window.setTimeout(function(){  console.log(1); },1); window.setTimeout(function(){  console.log(2); },2); window.setTimeout(function(){  console.log(3); },3); window.requestAnimationF...
requestAnimationFrame与setTimeout的区别
weixin_30508241的博客
03-09 184
以往常常使用 setTimeout 以及 setInterval 方法来制作 JavaScript 动画，但是这种方式制作的动画经常会由于计时器的特性而带来一些问题。简单地说一下，计时器动画有以下几个问题。 间隔时间不精确，可能被阻塞。计时器的间隔指的是将回调函数推入任务队列的间隔时间，任务队列中的任务只有在主线程任务执行完毕后才会被执行。 计时器动画的间隔时间如果设定过短就会出现过度...
将RequestAnimationFrame与类似setTimeout的函数一起使用
04-03
为了解决这个问题，出现了`jsTimers-rAF`库，它允许我们像使用`setTimeout`和`setInterval`那样方便地利用`RequestAnimationFrame`。 `jsTimers-rAF`库的主要目标是提供一个平滑的过渡，让开发者可以在不改变现有...
为啥一般使用requestAnimationFrame 代替setTimeout
12-15
使用requestAnimationFrame代替setTimeout的原因有以下几点： 1. requestAnimationFrame的执行时间是由浏览器决定的，它会根据浏览器的刷新频率来决定回调函数的执行时间，因此可以保证动画的流畅性和性能。 2. 当...
前端开发必备：requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
最新发布
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
06-21 4636
它会将回调函数加入到浏览器下一次重绘之前要执行的队列中。setInterval：与 setTimeout 类似，setInterval 也会将要执行的代码或函数放入事件循环队列中，但它在指定的时间间隔后会一直重复执行，直到 clearInterval 被调用或窗口被关闭。函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。
setTimeout与requestAnimationFrame对比（页面刷新）
叶
02-15 292
setTimeout与requestAnimationFrame
requestAnimationFrame、setTimeout、setInterval总结与区别
qq_41400354的博客
01-23 666
setTimeout： setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。 setTimeout(()=> {执行代码段}, time延迟时间),在执行前可以手动取消,setTimeout函数之前后会返回ID值，利用clearTimeout可以取消定时器 setInterval： ...
setTimeout、setInterval 和 requestAnimationFrame 之间的区别
DreamFive
04-20 1310
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
JS动画三剑客——setTimeout、setInterval、requestAnimationFrame
m0_73988449的博客
09-22 448
前端实现动画效果主要有以下几种方法：CSS3中的transition 和 animation ，Javascript 中可以通过定时器 setTimeout、setinterval，HTML5 canvas，HTML5提供的requestAnimationFrame。本文主要分析setTimeout、setinterval、requestAnimationFrame三者的区别和他们各自的优缺点。二、浏览器动画原理浏览器动画的基本实现思路。
代码优化: requestAnimationFrame来代替setTimeout
第⑦个前端
02-15 321
前端优化
requestAnimationFrame替代setTimeout、setInterval
weixin_34331102的博客
03-27 895
requestAnimationFrame相较于setTimeout、setInterval的优点这里不多说，想要了解的同学可以戳requestAnimationFrame最佳实践。 requestAnimationFrame原生没有自定义时间间隔执行的功能，比如想要实现每隔1s执行一次的功能或者延时1s执行，每次都要重写间隔时间的重复代码，想着可以将之抽出。直接上代码： const RAF = ...
HTML/Javascript requestAnimationFrame（）时间timestamp 的理解和FPS(Frames Per Second) 实现（附代码）
m0_60558800的博客
01-18 1333
requestAnimationFrame 函数不需要传入时间参数, 其刷新的频率一般是每秒60帧(FPS=60),这是大多数屏幕渲染的时间间隔,因此这也是游戏可以实现的最快的刷新频率。 但有时我们希望FPS<60, 比如说30FPS, 或者更慢一些， 这该如何实现呢？ 下面的代码即可以实现任意刷新频率FPS： ...
requestAnimationFrame，读懂这篇文章就够了
知之为知之，不知为不知
05-03 1997
requestAnimationFrame 请求动画帧； 它是一个浏览器的宏任务； requestAnimationFrame的用法与setTimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值