当前位置: 首页 > Web前端 > HTML

JS动画定时器详解

时间:2023-04-02 19:40:29 HTML

广义上讲:凡是通过js改变的视觉呈现都称为动画;例如按钮、链接等元素交互反馈。狭义的:通过定时器不断调用js函数改变元素属性而产生的视觉动画效果。Timer定时器是JavaScript动画的核心技术;setTimeout()和setInterval()众所周知,过去经常使用;它们通常用作辅助和锦上添花;细心的人可能会发现一个现象,从其他标签页切换到有循环动画的页面会导致卡顿和快速的帧切换;问题出在他们内部的运行机制上;setTimeout的第一个参数建议使用函数形式,字符串形式会被解析两次,和eval一样的问题;多两个参数,more,见例1;这指出了问题,请参见示例2;返回值是一个整数;clearTimeout(timer)取消定时器;setInterval、clearInterval同上;示例1:setTimeout(function(a,b){console.log(a+b);},1000,1,1);范例二:vara=0;functionfoo(){console.log(this.a);};varobj={a:2,foo:foo}setTimeout(obj.foo,100);运作机制范例:setTimeout(function(){console.log(1);});console.log(0);原因:加入队列,阻塞执行。setTimeoutlegend:setIntervallegend:存在表示合理的父子元素事件冒泡,需要先执行父元素,见例3;用户自定义回调函数,通常在浏览器默认动作之前触发,见例4;示例3:

示例4:requestAnimationFrame的用法与setTimeout类似,只是不需要时间参数;机制完全不同:1.setTimeout是异步操作,加入任务队列(事件循环),当js引擎线程中的同步代码执行时,会从任务队列中取出执行;2、raf是useragent(浏览器)专门为动画开发的接口,useragent会以合适的频率更新动画帧(一般与显示刷新率相同,1000/60ms),并停止帧更新隐藏或非活动页面以节省CPU资源;3、raf示例raf简单兼容window.requestAnimFrame=(function(){returnwindow.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||函数(回调){window.setTimeout(回调,1000/60);};})();参考:setTimeout详细介绍