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 相关文章推荐
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 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
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
JavaScript prototype属性使用说明
2010/05/13 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
详解Python异常处理中的Finally else的功能
2017/12/29 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
Solaris操作系统的线程机制
2015/07/28 面试题
东方红海科技面试题软件测试方面
2012/02/08 面试题
软件测试题目
2013/02/27 面试题
《与象共舞》教学反思
2014/02/24 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
语文教师求职信范文
2015/03/20 职场文书
外科护士长工作总结
2015/08/12 职场文书
alibaba seata服务端具体实现
2022/02/24 Java/Android