setInterval、setTimeout和requestAnimationFrame「建议收藏」

setInterval、setTimeout和requestAnimationFrame「建议收藏」setTimeout setTimeout延时执行某一段代码,但setTimeout由于EventLoop的存在,并不百分百是准时的,一个set

setTimeout setTimeout延时执行某一段代码,但setTimeout由于EventLoop的存在,并不百分百是准时的,一个setTimeout可能会表示如下的形式:

// 延时1s之后,打印hello,world
setTimeout(() => {
  console.log('hello,world');
}, 1000)

setInterval: setInterval在指定的时间内,重复执行一段代码,与setTimeout类似,它也不是准时的,并且有时候及其不推荐使用setInterval定时器,因为它与某些耗时的代码配合使用的话,会存在执行积累的问题,它会等耗时操作结束后,一起一个或者多个执行定时器,存在性能问题。一个setInterval可能会表示如下的形式:

setInterval(() => {
  console.log('hello,world');
}, 1000)

requestAnimationFrame: 翻译过来就是请求动画帧,它是html5专门用来设计请求动画的API,它与setTimeout相比有如下优势:

  1. 根据不同屏幕的刷新频率,自动调整执行回调函数的时机。
  2. 当窗口处于未激活状态时,requestAnimationFrame会停止执行,而setTimeout不会
  3. 自带函数节流功能
var progress = 0;
var timer = null;
function render() {
  progress += 1;
  if (progress <= 100) {
    console.log(progress);
    timer = window.requestAnimationFrame(render);
  } else {
    cancelAnimationFrame(timer);
  }
}
//第一帧渲染
window.requestAnimationFrame(render);

如若转载,请注明出处:开源字节 https://sourcebyte.cn/article/171.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
转载请注明出处: https://daima100.com/11967.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注