requestAnimationFrame和setTimeout

最新推荐文章于 2024-06-21 08:42:30 发布
最新推荐文章于 2024-06-21 08:42:30 发布
阅读量92 收藏
点赞数
文章标签： javascript js基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TinaSlowDown/article/details/132598551
版权

requestAnimationFrame()告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
浏览器重绘频率一般是60帧/秒，即16.7ms重绘一次，这样可以让动画流畅。
window.requestAnimationFrame(callback)
和setTimeout(callback,16.7)实现的功能类似，区别在于前者RAF在浏览器进入后台或iframe隐藏时会暂停，对性能和体验更友好，而setTimeout依然执行。

TinaSlowDown
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
探讨requestAnimationFrame
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
02-13 753
在JS中，我们可以使用 setTimeout 和 setIntarval 实现动画，但是 H5 的出现，让我们又多了两种实现动画的方式，分别是 CSS 动画（transition、animation）和 H5的canvas 实现。除此以外，H5还提供了一个专门用于请求动画的API，让 DOM 动画、canvas动画、svg动画、webGL动画等有一个专门的刷新机制。 1. 是什么 requestA...
requestAnimationFrame简单用法
qq_40184218的博客
04-22 2140
面试题：用js实现一个无限循环的动画。 首先想到的是定时器 <!doctype html> <html lang="en"> <head> <title>Document</title> </head> <body> <div id="aaa"></div> <script> let a = aaa; let flag = true; let left =
requestAnimationFrame 和 setTimeout 的区别
qq_45803050的博客
09-18 1393
requestAnimationFrame 和 setTimeout 的区别
setTimeout和requestAnimationFrame
岂曰无衣
11-03 456
前端制作动画的方法有css动画、JavaScript动画、svg动画、canvas动画等。 setTimeout和requestAnimationFrame就是javascript制作动画的API。 一、什么是动画 ？ 动画其实是一种假象，一种将不连续的运动以帧的形式呈现给我们的东西。 一般来说，人类大脑可以侦测到的帧速率在60FPS，当屏幕刷新率低于60FPS时，人眼可以感受到屏幕的闪烁、不连贯，容易对动画展示效果和视觉 感官产生不好的影响。 因此，大部分的电脑、手机等现代只能设备也是以60FPS的速率来
前端开发必备：requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-21 3703
它会将回调函数加入到浏览器下一次重绘之前要执行的队列中。setInterval：与 setTimeout 类似，setInterval 也会将要执行的代码或函数放入事件循环队列中，但它在指定的时间间隔后会一直重复执行，直到 clearInterval 被调用或窗口被关闭。函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。
setTimeout与requestAnimationFrame的区别
upup
02-02 1962
--------------------武汉加油！！！中国加油！！！------------------------------------------------------2020-02-02-----------------今天这个日期不错-------------------------------------------------- 这两个东西是和动画相关的两个api 什么是动画？动画...
setTimeout与requestAnimationFrame的一道题
qingliuFu的博客
06-14 728
问以下代码的执行的可能结果有几种？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的函数一起使用
04-03
为了解决这个问题，出现了`jsTimers-rAF`库，它允许我们像使用`setTimeout`和`setInterval`那样方便地利用`RequestAnimationFrame`。 `jsTimers-rAF`库的主要目标是提供一个平滑的过渡，让开发者可以在不改变现有...
JavaScript requestAnimationFrame动画详解
10-19
在polyfill中，可以通过检查当前浏览器是否支持requestAnimationFrame，并在不支持的情况下，使用setTimeout或setInterval来模拟requestAnimationFrame的行为。 例如，通过一个简单的polyfill，代码如下： ```...
setInterval和setTimeout停止的方法
09-05
为了更精确控制定时器，可以使用`requestAnimationFrame`或`Promise`的`setTimeout`替代，它们提供了更好的性能和同步特性，特别是在涉及到动画或需要与渲染帧同步的场景中。 总结来说，`setInterval`和`setTimeout...
request-timeout:像 setTimeout() 但使用 requestAnimationFrame()
07-05
像setTimeout()但使用requestAnimationFrame() 。 setTimeout不考虑浏览器中发生的其他事情。 您还可以找到requestInterval组件。 安装 用做： $ npm install nk-request-timeout --save 使用安装： $ ...
requestAnimationFrame与setInterval,setTimeout
weixin_34301132的博客
05-04 96
自打学习canvas动画以来,都说requestAnimationFrame好,就一直用,也没觉得有什么太过于特殊的地方,直到刚才,在写完前面的"小球碰撞墙壁----干掉误差"之后,,突然想去看看如果这里改回setInterval,会是个什么样,差距究竟有多大? 结果....一看吓一跳,差距太大了,说难听点,setInterval...简直像屎一样 具体结果,只需要将前面那篇里面的gamleL...
setTimeout, setInterval 与 requestAnimationFrame 隐藏的各种坑
热门推荐
研究与专注
08-31 1万+
使用 JavaScript 做动画时，或者做与时间有关的事情，你有三个选择：`setTimeout`, `setInterval` 和 `requestAnimationFrame` ，这三个函数有点类似，也有点区别，也有一些坑等你来踩。
requestAnimationFrame与setTimeout的区别
weixin_30508241的博客
03-09 174
以往常常使用 setTimeout 以及 setInterval 方法来制作 JavaScript 动画，但是这种方式制作的动画经常会由于计时器的特性而带来一些问题。简单地说一下，计时器动画有以下几个问题。 间隔时间不精确，可能被阻塞。计时器的间隔指的是将回调函数推入任务队列的间隔时间，任务队列中的任务只有在主线程任务执行完毕后才会被执行。 计时器动画的间隔时间如果设定过短就会出现过度...
JavaScript四种定时器
miaomiao_1024的博客
09-14 537
JS的四种定时器剖析setTimeout VS setIntervalsetImmediaterequestAnimationFrame setTimeout VS setInterval setTimeout: 设置一个定时器，在定时器到期后执行一次函数或代码段。 setTimeout() 只执行 code 一次。 setInterval() 方法可按照指定的周期（以毫秒计）来调...
setTimeout/setInterval与requestAnimationFrame的区别？
weixin_40851188的博客
04-29 3775
提到 setTimeout/setInterval 以及 requestAnimationFrame，大家的第一反应是动画相关的两个 API。 什么是web 动画 我们来谈谈什么是动画。动画其实是一种假象，是一种不连续的运动以帧的形式呈现给我 们的东西。在二十世纪，通常人们观看的电影其实就是通过胶片记录和投影的。它是以每 秒至少 24 帧的速度形成的视觉上的运动起来的假象。NTSC 广播的标准...
为啥一般使用requestAnimationFrame 代替setTimeout
12-15
使用requestAnimationFrame代替setTimeout的原因有以下几点： 1. requestAnimationFrame的执行时间是由浏览器决定的，它会根据浏览器的刷新频率来决定回调函数的执行时间，因此可以保证动画的流畅性和性能。 2. 当...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值