JS动画定时器知识总结

广义说：一切通过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图例：

setInterval图例：

存在即合理

父子元素事件冒泡，需要先执行父元素，见示例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示例

raf简单兼容

window.requestAnimFrame = (function(){
 return window.requestAnimationFrame ||
   window.webkitRequestAnimationFrame ||
   window.mozRequestAnimationFrame ||
   function( callback ){
    window.setTimeout(callback, 1000 / 60);
    };
  })();

您可能感兴趣的文章:

  • js定时器+简单的动画效果实例
  • JS Canvas定时器模拟动态加载动画
赞 (0)

相关推荐

  • js定时器+简单的动画效果实例

    1.向下滑动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>向下滑动</title> <style> body { margin: 0px; } #show { width: 200px; /* 高度为 0 */ height: 100px; background-color: lightc

  • JS Canvas定时器模拟动态加载动画

    本文实例为大家分享了Canvas定时器动态加载动画,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <canvas id="canva

  • JS动画定时器知识总结

    JS动画定时器知识总结

    广义说:一切通过js改变的视觉呈现都叫动画:例如,按钮,链接等元素交互反馈. 狭义说:通过定时器连续调用js函数进行元素属性改变产生的视觉动画效果. 定时器 定时器是JavaScript动画的核心技术: setTimeout(),setInterval()是大家熟知的,以前经常使用的: 一般都是做些辅助性,锦上添花的事: 细心的人可能会发现一个现象,从其他标签页切换到有循环动画页面会有卡顿和急速帧切换现象: 问题就在于他们的内在运行机制: 认识setTimeout 第一个参数推荐用函数形式,字符

  • js动画(animate)简单引擎代码示例

    用惯了jquery的同学,相信都很欣赏其动画引擎.确实相对比较完善!如果,如果想像力足够丰富的话,相信可以做出超出想像的效果.当然,跟2d库比起来,还是相差相当一段距离.jquery压根也不是专门为动画而设计的.模拟真实世界方面,还是不足的.但在web世界里还是游刃有余的.动画其实一直是flash的专属领地(web区哉).只是它常常沦为黑客攻击的漏洞所在,而且要装插件,有时候文件实在太大,而且性耗实在是高啊.html5出现后,其实adobe自己都转移阵地到html5了.当然,我觉得很长一段时间内

  • 九种原生js动画效果

    在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果 说明:匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

  • 使用requestAnimationFrame实现js动画性能好

    使用requestAnimationFrame实现js动画性能好.先给大家简单介绍下requestAnimationFrame比起setTimeout.setInterval有哪些优势? 示例一: requestAnimationFrame 比起 setTimeout.setInterval的优势主要有两点: 1.requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒6

  • JS动画效果打开、关闭层的实现方法

    本文实例讲述了JS动画效果打开.关闭层的实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

  • Node.js的基本知识简单汇总

    Node.js从2009年诞生至今,已经发展了两年有余,其成长的速度有目共睹.从在github的访问量超过Rails,到去年底Node.jsS创始人Ryan Dalh加盟Joyent获得企业资助,再到今年发布Windows移植版本,Node.js的前景获得了技术社区的肯定.InfoQ一直在关注Node.js的发展,在今年的两次Qcon大会(北京站和杭州站)都有专门的讲座.为了更好地促进Node.js在国内的技术推广,我们决定开设"深入浅出Node.js"专栏,邀请来自Node.js领域

  • JS动画实现回调地狱promise的实例代码详解

    1. js实现动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animate</title> <style> .ball { width: 40px; height: 40px; margin-bottom: 5px; border-radius: 20px; } .ball1 { ba

  • Angular.js中定时器循环的3种方法总结

    本文主要设计定时器的三种循环,模板自配,下面分享给大家供大家参考,具体如下: 1.$interlval实现,比较简单和原生js的setInterval比较相似 var app = angular.module('myApp',[]); app.run(function($rootScope , $interval){ var img=["http://hdn.xnimg.cn/photos/hdn321/20130612/2235/h_main_NNN4_e80a000007df111a.jpg

  • 详解JS中定时器setInterval和setTImeout的this指向问题

    前言 Js是一个单线程语言,可以通过setTimeout()和setInterval()来设置代码在指定时刻运行,前者是在指定时间后执行,后者是指每隔一段时间执行.两者的使用方法类似. 最近在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,详细的介绍通过一个示例展开,一起来看看吧. 如下例: var num = 0; function Obj (){ this.num = 1, this.getNum =

随机推荐