技术标签： 前端开发 css html5 javascript
为什么要说它，源于看到的一道面试题：问题是用js实现一个无限循环的动画。
首先想到的是定时器
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
#e{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
zoom: 1;
}
</style>
</head>
<body>
<div id="e"></div>
<script>
var e = document.getElementById("e");
var flag = true;
var left = 0;
function render() {
if(flag == true){
if(left>=100){
flag = false
}
e.style.left = ` ${
left++}px`
}else{
if(left<=0){
flag = true
}
e.style.left = ` ${
left--}px`
}
}
setInterval(function(){
render()
},1000/60)
</script>
</body>
</html>
可以说是完美实现！
至于时间间隔为什么是1000/60,这是因为大多数屏幕渲染的时间间隔是每秒60帧。
既然setInterval可以搞定为啥还要用requestAnimationFrame呢？
不同之处在于，setInterval必须指定多长时间再执行，window.requestAnimationFrame()则是推迟到浏览器下一次重绘时就执行回调。重绘通常是 16ms 执行一次，不过浏览器会自动调节这个速率，比如网页切换到后台 Tab 页时，requestAnimationFrame()会暂停执行。
如果某个函数会改变网页的布局，一般就放在window.requestAnimationFrame()里面执行，这样可以节省系统资源，使得网页效果更加平滑。因为慢速设备会用较慢的速率重流和重绘，而速度更快的设备会有更快的速率。
直接上代码：
注意： requestAnimationFrame()在浏览器重绘前执行，所以要想执行requestAnimationFrame()必须要让浏览器触发重绘。
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
#e{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
zoom: 1;
}
</style>
</head>
<body>
<div id="e"></div>
<script>
var e = document.getElementById("e");
var flag = true;
var left = 0;
function render() {
if(flag == true){
if(left>=100){
flag = false
}
e.style.left = ` ${
left++}px`
}else{
if(left<=0){
flag = true
}
e.style.left = ` ${
left--}px`
}
}
//requestAnimationFrame效果
(function animloop() {
render();
window.requestAnimationFrame(animloop);
})();
</script>
</body>
</html>
但是，怎么停止requestAnimationFrame？是否有类似clearInterval这样的类似方法？
答案是确定的。requestAnimationFrame()返回一个 long 整数，请求 ID ，是回调列表中唯一的标识，是个非零值，没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
#e{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
zoom: 1;
}
</style>
</head>
<body>
<div id="e"></div>
<script>
var e = document.getElementById("e");
var flag = true;
var left = 0;
var rafId = null
function render() {
if(flag == true){
if(left>=100){
flag = false
}
e.style.left = ` ${
left++}px`
}else{
if(left<=0){
flag = true
}
e.style.left = ` ${
left--}px`
}
}
//requestAnimationFrame效果
(function animloop(time) {
console.log(time,Date.now())
render();
rafId = requestAnimationFrame(animloop);
//如果left等于50 停止动画
if(left == 50){
cancelAnimationFrame(rafId)
}
})();
//setInterval效果
// setInterval(function(){
// render()
// },1000/60)
</script>
</body>
</html>
function animloop() {
console.log('aa')
}
window.requestAnimationFrame(animloop);
浏览器其实一直在刷新，当给window.requestAnimationFrame传入一个回调函数的时候，那么就是告诉浏览器在渲染前执行一下这个回调函数。
(function animloop(time) {
console.log('time', Date.now())
rafId = requestAnimationFrame(animloop);
})();
或者
<script>
let i= 0;
function clock() {
console.log(i)
window.requestAnimationFrame(clock);
}
window.requestAnimationFrame(clock);
</script>
上面这段代码只要一执行，那么就会停不下来。
原因是：我们可以把requestAnimationFrame想象成setTimeout，由于requestAnimationFrame并不是在所有的浏览器中都支持，那么我们可以写一个用setTimeout实现的polyfill，而setTimeout又是异步的，所以，进入异步队列后又调用那个回调，这样一直回调下去，所以能够一直执行。
如下：
// 这段代码不全
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
文章浏览阅读188次。打开MRTG软件包中的"MRTG.cfg"文件，该文件是MRTG的主配置文件。打开MRTG软件包中的"MRTG.cfg"文件，该文件是MRTG的主配置文件。确保将命令中的"C:\MRTG"替换为你的MRTG安装目录和配置文件路径，"community"替换为你的SNMP团体字符串，"device_ip"替换为目标设备的IP地址。确保将命令中的"C:\MRTG"替换为你的MRTG安装目录和配置文件路径，"community"替换为你的SNMP团体字符串，"device_ip"替换为目标设备的IP地址。_mrtg 下载
文章浏览阅读1w次，点赞7次，收藏35次。Kaggle机器学习竞赛、托管数据库、编写和分享代码_kaggle在线写代码
文章浏览阅读3.1k次，点赞11次，收藏14次。CentOS7突然连接不了网络，使用systemctl status network后报如下错误network.service - LSB: Bring up/down networkingLoaded: loaded (/etc/rc.d/init.d/network; bad; vendor preset: disabled)Active: failed (Result: exit-code)【解决方案】停止NetworkManager并取消开机启动chkconfig NetworkMan_network.service - lsb: bring up/down networking loaded: loaded (/etc/rc.d/in
文章浏览阅读4.9w次，点赞312次，收藏1.3k次。前言GitHub作为程序员们的开源宝库，有着很多非常好的项目。对于初学者来说，游戏有着一种特殊的魅力。今天统计了GitHub上比较有趣的10个开源小游戏，其中有许多可以称之为经典。笔者是一名90后，《贪吃蛇》、《坦克大战》、《超级马里奥》和《太空侵略者》作为儿时的玩伴，陪伴笔者度过了很多时光，给笔者带来了非常多的回忆。1、Pacman（吃豆人游戏）项目演示地址： https://passe..._github开源小游戏
文章浏览阅读210次。写在最前面，我总结出了很多互联网公司的面试题及答案，并整理成了文档，以及各种学习的进阶学习资料，免费分享给大家。扫码加微信好友进【程序员面试学习交流群】，免费领取。也欢迎各位一起在群里探讨技术。通过前面的介绍，我们知道在二叉树中，每个节点只有一个数据项，最多有两个子节点。如果允许每个节点可以有更多的数据项和更多的子节点，就是多叉树。本篇博客我们将介绍的——2-3-4树，它是一种多叉树，..._树查找 java 笔试题
文章浏览阅读3k次。FinGPT是一个开源的金融语言模型（LLMs），由FinNLP项目提供。这个项目让对金融领域的自然语言处理（NLP）感兴趣的人们有了一个可以自由尝试的平台，并提供了一个与专有模型相比更容易获取的金融数据。FinGPT使用RLHF方法进行个性化的金融语言建模，这与BloombergGPT的方法不同。它采用了一种轻量级的低秩适应技术，使得微调模型变得更简单和经济。FinGPT项目为金融领域的自然语言处理开创了新的可能，它的开源性质能推动这个领域的进步和创新。_fingpt
文章浏览阅读141次。JPA分页当请求的数据总量很大时，这时候前端往往都会要求后端将数据分页返回。本文介绍SpringBoot下后端数据层使用JPA+MySQL时，如何分页返回数据(除了当前页面的数据，往往还要返回总页数这项数据)。一、从头到尾自己实现分页：Controller层：使用@RequestParam绑定page和pageSize参数，调用ServiceService层：接收page、pageSize参数，..._jpa mysql limit 分页
文章浏览阅读7.6k次。当月10号左右大量windows10系统发现打印照片时只能打印出头和尾，如下还有没开始打印，一选择打印机电脑就重启，是因为微软发布的新补丁不兼容，卸载最近更新的补丁即可（不同系统版本补丁编号是不一样的，看最近日期就行了）打开控制面板-卸载程序查看已安装的更新按时间排序双击卸载最新的补丁重启即可..._win10更新后打印图片中间空白
文章浏览阅读2.4k次。SaltUtil 类 private final String algorithmName = "SHA-256"; private final int hashIterations = 10000; private static RandomNumberGenerator randomNumberGenerator = new SecureRandomNumberGenerator(); //默认16位……//方法中调用// 生成salt model.se_sha256随机盐加密
文章浏览阅读763次。启动操作js ://--by wallvar startReq=BPMStartXml.XMLDocument;cordys.setNodeText(startReq,".//*[local-name()='BusinessID']",pursh_id.getValue());cordys.setNodeText(startReq,".//*[local-name()_cordys服务重启
文章浏览阅读93次。为什么80%的码农都做不了架构师？>>> ..._.net dll gac
文章浏览阅读4.7k次，点赞3次，收藏6次。点击工具，选择 选项。_visual studio怎么调整字体大小