setInterval、setTimeout、requestAnimationFrame

最新推荐文章于 2024-06-21 08:42:30 发布
最新推荐文章于 2024-06-21 08:42:30 发布
阅读量188 收藏
点赞数
分类专栏： 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50736511/article/details/124363709
版权

setTimeout :设置某个时间后执行某个动作，表示延时执行某个动作

setInterval :设置每隔多久执行一次某个动作，它是循环的，如果想重复执行使用该方法

requestAnimationFrame :不需要设置时间间隔，要求浏览器在下次重绘之前调用指定的回调函数更新动画。

SetTimeout、SetInterval、RequestAnimationFrame：特点、区别、应用场景
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
01-19 650
随着对这些API的深入了解，开发者可以更加灵活地运用它们解决各种实际问题，从而提高应用的整体质量和用户满意度。是一种专门为优化动画而设计的方法，它告诉浏览器你希望执行一个动画，并请求浏览器调用一个指定的函数来更新下一帧动画。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，而对于需要连续执行的任务，尤其是那些对时间精度要求不高的情况，然而，对于涉及视觉效果的动画，
JS & setTimeout/setInterval、requestAnimationFrame 的关系以及回调函数、Promise、async/await 异步操作
Thinking anywhere anytime.
06-21 702
掌握 setTimeout、回调函数、Promise/async 异步操作含义
setTimeout 、setInterval、requestAnimationFrame
好好学习天天向上
08-02 494
如果事件处理程序花了300ms多一点时间完成，同时定时器代码也花了差不多的时间，就会同时出现跳过某间隔的情况。这样做的好处 ①在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔。② 它可以保证在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续的运行。显示器的刷新频率是60Hz，浏览器也会尽量保持60Hz的刷新率运行，也就是16.7ms刷新一帧所以(60次/s)在每次屏幕刷新时，判断当前帧是否还有多余的时间(上述6个步骤执行完后)，如果有，则会调用。........
setTimeout、setInterval、requestAnimationFrame，定时器不准时
luemeon的博客
01-30 1230
变动观察器）是一种Web API，它允许开发者监视DOM树的变化并在这些变化发生时执行回调函数允许监视DOM树的变化，因此它也可以用于异步任务的调度。不同设备的屏幕刷新频率可能不同， setTimeout/setInterval只能设置固定的时间间隔，这个时间和屏幕刷新间隔可能不同。考虑极端情况，假如定时器里面的代码需要进行大量的计算，或者是DOM操作，代码执行时间超过定时器的时间，会出现定时器不准的情况。是一种宏任务，但是优先级较低，可能在其他异步任务之后执行。这样设计的原因，如果在GUI渲染的时候，
setTimeout、setInterval、requestAnimationFrame：特点、区别、应用场景
大剑师兰特的GIS世界
04-07 1606
在实现动画或周期性任务时，应优先考虑使用 `requestAnimationFrame`，因为它能更好地适应各种设备的刷新率，实现更流畅的动画效果。而对于非视觉相关的简单延时任务或固定间隔任务，`setTimeout` 和 `setInterval` 更为合适，但需要注意它们的时间精度问题，并合理控制任务执行以防止阻塞UI线程。
setTimeout，setinterval和requestAnimationFrame
qq_44885374的博客
10-14 204
计时器按照时间反复执行； setTimeout一次性计时器 延迟多长时间去执行 ，相对应关闭计时器的方法是：clearTimeout() setinterval循环计时器 ,相对应关闭计时器的方法是： clearInterval() 以上两个计时器时间可以设置，缺点：在网页缩小或者切换选项卡之后计时器继续执行 如何将setTimeout改造为循环计时器 showtime(); f...
react-timing-hooks:React针对setTimeout，setInterval，requestAnimationFrame，requestIdleCallback的钩子
05-17
requestAnimationFrame setTimeout setInterval requestIdleCallback 包括“效果”版本和实用程序挂钩，如useTimer ， useAnimationFrameLoop 完整的打字稿支持 （压缩后小于1KB，无外部依赖项） 摇树 安装 #...
setTimeout, setInterval 与 requestAnimationFrame 隐藏的各种坑
热门推荐
研究与专注
08-31 1万+
使用 JavaScript 做动画时，或者做与时间有关的事情，你有三个选择：`setTimeout`, `setInterval` 和 `requestAnimationFrame` ，这三个函数有点类似，也有点区别，也有一些坑等你来踩。
iOS8.0至8.1.1的setTimeout、setInterval及requestAnimationFrame修复指南
资源摘要信息:"IOS8-FIX:修复 IOS8.0 中的 setTimeout setInterval requestAnimationFrame -> IOS8.1.1（已修复）" 该文档提到了在iOS8.0版本中setTimeout、setInterval和requestAnimationFrame函数存在的问题，并...
setTimeout/setInterval与requestAnimationFrame的区别？
weixin_40851188的博客
04-29 3939
提到 setTimeout/setInterval 以及 requestAnimationFrame，大家的第一反应是动画相关的两个 API。 什么是web 动画 我们来谈谈什么是动画。动画其实是一种假象，是一种不连续的运动以帧的形式呈现给我 们的东西。在二十世纪，通常人们观看的电影其实就是通过胶片记录和投影的。它是以每 秒至少 24 帧的速度形成的视觉上的运动起来的假象。NTSC 广播的标准...
requestAnimationFrame、setTimeout、setInterval
caicsama的博客
01-18 257
MDN定义： requestAnimationFrame()：执行动画，要求浏览器在下次重绘之前调用指定的回调函数更新动画 参数：回调函数作为参数，回调函数会在下次重绘之前执行 回调函数的执行次数和浏览器的刷新频率有关 返回值： 回调列表的唯一ID标识；传入widow.cancelAnimationFrame()取消回调函数 可以利用requestAnimationFrame()实现节流 let flag = false; window.addEventListener('scroll',()=>{
定时器--setTimeout()、setInterval()、requestAnimationFrame()
qq_44681872的博客
12-17 626
一、属性介绍和使用 setTimeout() 一次性的定时器 (要做的事情--函数, 规定的时间--单位为毫秒，1秒 = 1000毫秒，传的参数--可多个，逗号隔开) setInterval() 永久性的定时器 (要做的事情--函数, 规定的时间--单位为毫秒，1秒 = 1000毫秒，传的参数--可多个，逗号隔开) setTimeout(function (a) { console.log("入侵阿里") console.log(a)
定时器setTimeout，setInterval，以及requestAnimationFrame动画用法
qq_42238554的博客
01-07 1437
定时器使用目前有三个方法可以使用： setTimeout()（设置某个时间后执行某个动作，表示延时执行某个动作） setInterval()（设置每隔多久执行一次某个动作，它是循环的，如果想重复执行使用该方法） requestAnimationFrame()（不需要设置时间间隔） 前言： 计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面，循环间...
前端开发必备：requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
最新发布
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
06-21 5320
它会将回调函数加入到浏览器下一次重绘之前要执行的队列中。setInterval：与 setTimeout 类似，setInterval 也会将要执行的代码或函数放入事件循环队列中，但它在指定的时间间隔后会一直重复执行，直到 clearInterval 被调用或窗口被关闭。函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。
的setinterval函数_setTimeout,setInterval,requestAnimationFrame各有什么特点？
weixin_29813635的博客
12-26 215
异步编程当然少不了定时器了，常见的定时器函数有 setTimeout、setInterval、requestAnimationFrame。先来讲讲最常用的setTimeout，很多人认为 setTimeout 是延时多久，那就应该是多久后执行。其实这个观点是错误的，因为 JS 是单线程执行的，如果前面的代码影响了性能，就会导致 setTimeout 不会按期执行。当然了，我们可以通过代码去修正 s...
2022年了！还在用定时器实现动画？赶紧试试requestAnimationFrame吧!
发果叁
07-28 390
前面我们介绍的是我们使用JS实现动画常用的手段，不可否认，在以前确实可以这样使用，也是最好的办法。但是我们也需要正面这些问题，特别是随着电子设备的不断更新换代，屏幕的刷新率也出现很多种的情况下，如果继续使用定时器来实现动画，很可能会造成动画的卡顿以及性能的消耗。有问题就有解决方案！就非常完美的解决了定时器实现动画的各种问题。我们先来看看官网如何解释它的。告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。是一个API，即一个原生方法。我们先来看看API。一个。...
requestAnimationFrame (定时&&动画)
Charlene_lx的博客
05-13 4436
requestAnimationFrame是HTML5新增的定时器,不需要设置时间间隔 cancelAnimationFrame方法用于取消定时器 requestAnimationFrame(调用函数) 优点: 1\性能好,页面处于不可见或不可用状态requestAnimationFrame会暂停渲染,setTimeout不会. 1\它能够保证我们的动画函数的每一次调用都对应着一次屏幕重绘 3\...
setTimeout、setInterval 和 requestAnimationFrame 之间的区别
DreamFive
04-20 1370
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
JS中的定时器requestAnimationFrame 、setTimeout 和setInterval
qq_34754747的博客
04-13 4016
1. requestAnimationFrame定时循环接口 1.1 requestAnimationFrame (rAF) 通知浏览器某个JS代码段在执行动画 浏览器会在每帧即将绘制之前，将这段代码先执行。 requestAnimationFrame和屏幕刷新是同步的，也就是说屏幕每刷新一次，requestAnimationFrame就触发一次。不同显示器的刷新率不同 那么如果要实现一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

万事胜意sy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值