setTimeout、setInterval和requestAnimationFrame之间的区别

最新推荐文章于 2024-06-21 08:42:30 发布
最新推荐文章于 2024-06-21 08:42:30 发布
阅读量1.5k 收藏
点赞数 1
分类专栏： javascript 文章标签： setTimeout、setInterval和requestAnima setTimeout使用场景 setInterval使用场景 setTimeout setInterval
阳光下的冷静
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于动画播放的一些记录(setInterval和requestAnimationFrame)
reffrselom的博客
10-16 301
FPS （每秒传输帧数(Frames Per Second)） FPS 表示的是每秒钟画面更新次数。我们平时所看到的连续画面都是由一幅幅静止画面组成的，每幅画面称为一帧，FPS 是描述“帧”变化速度的物理量。   理论上说，FPS 越高，动画会越流畅，目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲 FPS 为 60 frame/s 时动画效果最好，也就是每帧的消耗时间为 16.67ms。   对于不同帧频的用户体验大致如下： 能够达到 50～60 FPS 的动画将会相当流畅，
setTimeout与requestAnimationFrame对比（页面刷新）
叶
02-15 251
setTimeout与requestAnimationFrame
前端开发必备：requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-21 3238
它会将回调函数加入到浏览器下一次重绘之前要执行的队列中。setInterval：与 setTimeout 类似，setInterval 也会将要执行的代码或函数放入事件循环队列中，但它在指定的时间间隔后会一直重复执行，直到 clearInterval 被调用或窗口被关闭。函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。
requestAnimationFrame与setTimeout的区别
weixin_30508241的博客
03-09 171
以往常常使用 setTimeout 以及 setInterval 方法来制作 JavaScript 动画，但是这种方式制作的动画经常会由于计时器的特性而带来一些问题。简单地说一下，计时器动画有以下几个问题。 间隔时间不精确，可能被阻塞。计时器的间隔指的是将回调函数推入任务队列的间隔时间，任务队列中的任务只有在主线程任务执行完毕后才会被执行。 计时器动画的间隔时间如果设定过短就会出现过度...
requestAnimationFrame、setTimeout、setInterval
caicsama的博客
01-18 211
MDN定义： requestAnimationFrame()：执行动画，要求浏览器在下次重绘之前调用指定的回调函数更新动画 参数：回调函数作为参数，回调函数会在下次重绘之前执行 回调函数的执行次数和浏览器的刷新频率有关 返回值： 回调列表的唯一ID标识；传入widow.cancelAnimationFrame()取消回调函数 可以利用requestAnimationFrame()实现节流 let flag = false; window.addEventListener('scroll',()=>{
【面试】JS实现动画之setTimeout、setInterval和requestAnimationFrame
weixin_33705053的博客
03-14 203
参考：《JS高级程序设计》，这篇requestAnimationFrame文章 JS实现动画主要有三种方式：setTimeout、setInterval 和 requestAnimationFrame。其中最后一种方法比较好。 setTimeout、setInterval setTimeout、setInterval可以用来创建定时器。定时器对队列的工作方式是，当特定时间过去后将代码插入。 定时器...
react-timing-hooks:React针对setTimeout，setInterval，requestAnimationFrame，requestIdleCallback的钩子
05-17
requestAnimationFrame setTimeout setInterval requestIdleCallback 包括“效果”版本和实用程序挂钩，如useTimer ， useAnimationFrameLoop 完整的打字稿支持 （压缩后小于1KB，无外部依赖项） 摇树 安装 #...
setInterval和setTimeout停止的方法
09-05
在JavaScript中，`setInterval`和`setTimeout`是两种非常重要的定时器函数，它们用于在特定时间间隔后执行代码。了解它们的工作原理以及如何停止它们是编写高效、响应式的前端应用的关键。 `setInterval`方法用于...
将RequestAnimationFrame与类似setTimeout的函数一起使用
04-03
为了解决这个问题，出现了`jsTimers-rAF`库，它允许我们像使用`setTimeout`和`setInterval`那样方便地利用`RequestAnimationFrame`。 `jsTimers-rAF`库的主要目标是提供一个平滑的过渡，让开发者可以在不改变现有...
Js中setTimeout()和setInterval() 何时被调用执行的用法
12-11
为了提高性能和用户体验，可以考虑使用Promise、async/await、Web Workers等技术，或者利用`requestAnimationFrame`在浏览器渲染帧之间执行任务，以减少对主线程的影响。 总结来说，`setTimeout()`和`setInterval()...
requestAnimationFrame、setTimeout、setInterval总结与区别
qq_41400354的博客
01-23 628
setTimeout： setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。 setTimeout(()=> {执行代码段}, time延迟时间),在执行前可以手动取消,setTimeout函数之前后会返回ID值，利用clearTimeout可以取消定时器 setInterval： ...
setInterval 和 requestAnimationFrame 分析
左不言的博客
08-02 939
时间: 2019-8-2 电脑的屏幕每时每刻都以大约 16ms 的速度在刷新，我们的肉眼是没法看出来的。 正因为这样，所以我们才能看到屏幕上的任何一丝一毫的变化。 requestAnimationFrame 到底是什么？ ok，requestAnimationFrame 这个函数是window添加的一个api,当电脑重绘的时候，把你的函数传给这个api,那么它就会在下次重绘时执行你的函...
HTML5 Canvas 用requestAnimation取代setInterval
weixin_33875839的博客
11-15 552
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>requestAnimation取代setI...
setTimeout、setInterval和requestAnimationFrame的区别
chenlim87的博客
04-09 682
setTimeout()：在指定的时间后执行一段代码。只执行一次。 setInterval()：以固定的时间间隔，重复运行一段代码。可执行多次。 requestAnimationFrame()：setInterval()的现代版本;在浏览器下一次重新绘制显示之前执行指定的代码块，从而允许动画在适当的帧率下运行，而不管它在什么环境中运行。可运行多次。 它们都是异步函数，在主线程运行之后才执行。 setTimeout 语法： let timerId = setTimeout(func|code,[delay],
vue项目中引入循环执行setInterval或者requestAnimationFrame的用法等
weixin_30640769的博客
07-03 601
项目中循环计时处理某些方法的情况还是比较常见的，一般会用setInterval来处理，但是这个方法会似的页面卡顿等使用体验不好。 所以就使用浏览器提供的requestAnimationFrame方法，window.requestAnimationFrame()告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，...
倒计时 -- setInterval / requestAnimationFrame实现
舒婷的博客
02-18 510
setInterval vs requestAnimationFrame
setInterval、setTimeout和requestAnimationFrame
詹Sir的博客
06-28 179
setTimeout延时执行某一段代码，但setTimeout由于EventLoop的存在，并不百分百是准时的。
JS & setTimeout/setInterval、requestAnimationFrame 的关系以及回调函数、Promise、async/await 异步操作
cookcyq__的博客
06-21 571
掌握 setTimeout、回调函数、Promise/async 异步操作含义
setTimeout, setInterval 与 requestAnimationFrame 隐藏的各种坑
热门推荐
研究与专注
08-31 1万+
使用 JavaScript 做动画时，或者做与时间有关的事情，你有三个选择：`setTimeout`, `setInterval` 和 `requestAnimationFrame` ，这三个函数有点类似，也有点区别，也有一些坑等你来踩。
setTimout和setInterval的区别
07-27
回答: setTimeout和setInterval都是JavaScript中的定时器函数，但它们有一些区别。setTimeout(fn(),delay)在载入后延迟指定时间后执行一次表达式，而setInterval(fn(),delay)在载入后每隔指定的时间就执行一次表达式。\[1\]如果想要重复执行某些代码，可以将setTimeout包含于被执行函数中，然后在函数外再次使用setTimeout来达到定时执行的目的。这样，函数外的setTimeout在执行函数时再次触发setTimeout，形成周而复始的定时效果。或者可以使用setInterval，但需要手动调用clearInterval()来停止执行。而函数中嵌套setTimeout，可以根据函数内部逻辑不再调用setTimeout来停止触发。具体使用哪个函数，取决于具体情况。\[2\]另外，还有一种替代setInterval的方案是使用requestAnimationFrame函数，可以在函数内部控制执行次数，达到定时执行的效果。\[3\] #### 引用[.reference_title] - *1* *2* [JS中setTimout和setInterval的区别](https://blog.csdn.net/ylq1999/article/details/128757197)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [requestAnimationFrame替代setTimout 和 setInterval的方案](https://blog.csdn.net/yy168888/article/details/118387194)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值