【JavaScript 刨根问底之】requestAnimationFrame以及延时器
requestAnimationFrame
这里会说下
requestAnimationFrame的由来，以及为什么会出现它。同时也会横向对比下定时器以及延时器
早期的动画
动画是一个持续的过程。早期的时候动画都是通过定时器来实现的。看如下代码
(function() { function updateAnimations() { doAnimation1(); doAnimation2(); // 其他任务} setInterval(updateAnimations, 100);
})();
- 一般的计算器显示器的屏幕刷新频率是60HZ，这就意味着是每秒要绘制60次。大多数浏览器都会显示绘制频率。
- 为了实现动画效果过渡平滑最佳的重绘间隔大约17/毫秒。以这个速度重绘可以实现最佳的滑动效果。
- 但是即使是这样依然无法保证能平滑过度。因为延时器/定时器的执行的时机不定。虽然可以设置执行时间。即使将延时任务添加到队列中也无法保证能立马执行。这取决于上一个任务或是同步任务执行的时间长度
- 从js层面无法得知浏览器的绘制时机。所以函数
requestAnimationFrame就出现了
函数requestAnimationFrame
1. 执行时机
- 在每次浏览器重绘之前执行
2. 使用方法
- 函数
requestAnimationFrame只允许传递一个参数。而且参数必须是一个函数 - 参数函数会被加入到队列。在每次浏览器绘制之前将队列中的函数进行执行
- 每添加一次再下次绘制执行后，需要再次添加
function updateProgress() { var div = document.getElementById("status"); div.style.width = (parseInt(div.style.width, 10) + 5) + "%"; if (div.style.left != "100%") { requestAnimationFrame(updateProgress); }
}
requestAnimationFrame(updateProgress);
3. 如何取消
在全局中提供了函数
cancelAnimationFrame. 可以通过函数进行取消。大致的原理跟延时器/ 定时器保持一致
- 在函数
requestAnimationFrame将函数加入队列后，会返回一个id(可以将id理解为队列的位置)。可以通过执行函数cancelAnimationFrame来进行取消
let requestID = window.requestAnimationFrame(() => { console.log('Repaint!');
});
window.cancelAnimationFrame(requestID);
通过函数requestAnimationFrame进行节流处理
let enabled = true;
function expensiveOperation() { console.log('Invoked at', Date.now());
}
window.addEventListener('scroll', () => { if (enabled) { enabled = false; window.requestAnimationFrame(expensiveOperation); window.setTimeout(() => enabled = true, 50); }
});
【JavaScript 刨根问底之】requestAnimationFrame以及延时器相关推荐
- JavaScript学习笔记 06、DOM元素—③定时器与延时器
文章目录 前言 一.定时器(√) 1.1.介绍定时器与清除定时器方法(含案例) 1.2.解决按钮点击时设置定时器setInterval()的小问题 1.3.实际案例(设置与删除定时器) 二.延时器(√ ...
- 【JavaScript】- 打地鼠游戏(定时器嵌套延时器)
这里使用了定时器嵌套延时器的方法 js: window.addEventListener('load', () => {// 获取元素let start = document.querySele ...
- 【JavaScript】延时器定时器使用
延迟器 函数原型 概念 描述 setTimeout setTimeout( ()=>{ 函数体 }, time(ms) ) setInterval setInterval( ()=>{ 函 ...
- JavaScript的定时器延时器
定时器 定义 按照设定的时间间隔 循环往复执行程序也就是 按照设定的时间间隔 每间隔设定的时间 执行一次程序事件间隔的单位是 毫秒也就是 按照间隔时间 一直重复执行程序 语法 setInterval( ...
- JavaScript延时器和计时器
延时器 触发之后会进行指定时间的等待后执行 var t = setTimeout(function(){//使用setTimeout()会返回一个唯一的标示,通过clearTimeout(唯一标示)可 ...
- JavaScript定时器与延时器
定时器是根据设定的时间间隔来循环执行程序,只要定时器不停止程序就会一直执行 setInterval(参数1,参数2) 参数1:要执行的程序必须是一个函数的形式function(){ 定义程序 } 参数 ...
- 前端：JS/24/BOM和DOM简介，for...in循环遍历，window对象的属性和方法，延时器，定时器，screen屏幕对象，location地址栏对象，history历史记录对象
BOM 和DOM简介 BOM ,Browser Object Model ,浏览器对象模型: BOM主要提供了访问和操作浏览器各组件的方式: 浏览器组件:window(浏览器容器), location ...
- 29【定时器和延时器】
定时器和延时器 1.定时器 1.1 基本介绍 setInterval() 函数可以重复调用一个函数,在每次调用之间有固定的时间间隔. Interval:间隔 <!DOCTYPE html> ...
- 1.7 时间延时器和类的别名
1. 时间延时器 //等待一段时间,编写延时器 #include <iostream> #include <ctime> using namespace std; //time ...
最新文章
- Linux下搭建Lotus Domino集群
- Dottrace 10.0.2 使用心得
- 分布式发布订阅消息系统Kafka单实例测试
- 实践作业2：黑盒测试实践（小组作业）每日任务记录1
- 前端学习（2369）：组件的创建使用和组件的生命周期
- RSA的加解密过程--（转自CSDN，学习用）
- Head First设计模式读书笔记九 第十章 状态模式
- springmvc返回值、数据写到页面、表单提交、ajax、重定向
- nginx根据域名做http,https分发
- 机器学习——神经网络
- 中国法律年鉴Excel版本（1990-2021年）
- 红队常用的防守策略.
- google license key格式不对
- vue项目IE浏览器中打不开，为空白页
- STM32的IAP在线升级
- lotus notes 闪退_win10系统Lotus notes邮箱闪退的恢复办法
- layui控制文本框只能填写数字
- 如何避坑GraphicsView------小白鼠的养肥之路~
- linux超级管理员名字修改,linux添加超级管理员用户，修改，删除用户
- lunix上silk转mp3 和 mp3转silk