JS动画定时器知识总结


Posted in Javascript onMarch 23, 2018

广义说:一切通过js改变的视觉呈现都叫动画;例如,按钮,链接等元素交互反馈。

狭义说:通过定时器连续调用js函数进行元素属性改变产生的视觉动画效果。

定时器

定时器是JavaScript动画的核心技术;

setTimeout(),setInterval()是大家熟知的,以前经常使用的;

一般都是做些辅助性,锦上添花的事;

细心的人可能会发现一个现象,从其他标签页切换到有循环动画页面会有卡顿和急速帧切换现象;

问题就在于他们的内在运行机制;

认识setTimeout

第一个参数推荐用函数形式,字符串形式会两次解析,还有eval一样的问题;

不止两个参数,可以更多,见示例1;

this指向问题,见示例2;

返回值是个整数;

clearTimeout(timer)取消定时器;

setInterval,clearInterval同上;

示例1:

setTimeout(function(a,b){ 
 console.log(a+b); 
},1000,1,1);

示例2:

var a = 0;
function foo(){
 console.log(this.a);
};
var obj = {
 a : 2,
 foo:foo
}
setTimeout(obj.foo,100);

运行机制

示例:

setTimeout(function(){ 
 console.log(1); 
}); 
console.log(0);

原因:加入队列,阻塞执行。

setTimeout图例:

JS动画定时器知识总结

setInterval图例:

JS动画定时器知识总结

存在即合理

父子元素事件冒泡,需要先执行父元素,见示例3;

用户自定义的回调函数,通常在浏览器的默认动作之前触发,见示例4;

示例3:

<div id="myDiv" style="height: 100px;width: 100px;background-color: pink;"></div>
<script>
myDiv.onclick = function(){
 setTimeout(function(){
  alert(0);
 })
}
document.onclick = function(){
 alert(1);
}
</script>

示例4:

<input type="text" id="myInput">
<script>
myInput.onkeypress = function(event) {
 setTimeout(function(){
  myInput.value = myInput.value.toUpperCase();
 });
}
</script>

认识requestAnimationFrame

用法与setTimeout类似,只是不需要时间参数;

机制完全不同:

1,setTimeout是异步操作,加入任务队列( event loop ),当js引擎线程中同步代码执行完才会从任务队列中取出执行;

2,raf是用户代理(浏览器)专门针对动画开发的接口,用户代理会以合适的频率进行动画帧更新(一般同显示器刷新频率,1000/60ms),在隐藏或者非活动页面会停止帧更新,节省CPU资源;

3,raf示例

JS动画定时器知识总结

raf简单兼容

window.requestAnimFrame = (function(){ 
 return window.requestAnimationFrame || 
   window.webkitRequestAnimationFrame ||   
   window.mozRequestAnimationFrame || 
   function( callback ){  
    window.setTimeout(callback, 1000 / 60);
    };
  })();
Javascript 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
详解VUE单页应用骨架屏方案
Jan 17 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 #Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 #Javascript
浅谈Webpack 持久化缓存实践
Mar 22 #Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 #Javascript
Java设计中的Builder模式的介绍
Mar 22 #Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 #Javascript
收集前端面试题之url、href、src
Mar 22 #Javascript
You might like
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
javascript 闭包疑问
2010/12/30 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
Python3中的真除和Floor除法用法分析
2016/03/16 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
Linux的文件类型
2012/03/07 面试题
绩效工资分配方案
2014/01/18 职场文书
师德师风个人反思
2014/04/28 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
个人授权委托书范文
2014/09/21 职场文书
无房证明样本
2015/06/17 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
七个非常实用的Python工具包总结
2021/06/15 Python
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python