广义上讲，js改变的所有视觉呈现都叫动画；例如按钮、链接和其他元素。

狭义上讲，js函数是由定时器连续调用来改变元素的属性，产生视觉动画效果。

定时器

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

SetTimeout()、setInterval()是众所周知的，以前也经常使用。

一般是做一些辅助和锦上添花的事情；

细心的人可能会发现一个现象。从其他选项卡切换到循环动画的页面会造成卡顿和快速换帧；

问题在于他们的内部运行机制；

认识setTimeout

的第一个参数建议使用函数形式，字符串形式会被解析两次，存在和eval一样的问题；

有两个以上的参数，如示例1所示。

这就指向了问题，见例2；

返回值是一个整数；

ClearTimeout(计时器)取消计时器；

SetInterval、clearInterval同上；

例1:

setTimeout(函数(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)；原因：加入队列并阻止执行。

设置超时图例：

设置间隔图例：

存在即合理

父子元素事件冒泡，所以需要先执行父元素，如例3所示。

用户自定义回调函数通常在浏览器默认动作之前触发，如例4所示；

例3:

div id=' MyDiv ' style=' height : 100px；宽度： 100 px；背景-颜色：粉色/divscriptmydiv . onclick=function(){ setTimeout(function(){ alert(0))；})} document . onclick=function(){ alert(1)；}/脚本示例4:

input type=' text ' id=' myInput ' scriptmyinput . onkey press=function(event){ setTimeout(function(){ myInput . value=myInput . value . touppercase()；});}/script知道requestAnimationFrame

用法与setTimeout类似，只是不需要时间参数。

机制完全不同：

1，setTimeout是异步操作，它被添加到事件循环中。js引擎线程中的同步代码执行时，会从任务队列中取出执行；

2.raf是用户代理(浏览器)专门为动画开发的界面。用户代理会以适当的频率更新动画帧(一般与显示器刷新频率相同，1000/60ms)，并会停止更新隐藏或非活动页面上的帧，节省CPU资源；

3.raf示例

raf简单兼容

window . requestanimsframe=(function(){ return window . requestanimationframe | | window . webkitrequestanimationframe | | window . mozrequestanimationframe | | function(回调){ window.setTimeout(回调，1000/60)；};})();