JS实现动画的四条优化方法

1)如果使用的是setTimeout实现的轮询动画,在每一次执行方法之前需要把前面的设置的定时器清除掉

1 2 3 4 5 6 7

var timer=null; function (){ window.clearTimeout(timer); timer=window.setTimeout(move,15); } move();

2)为了防止全局变量的污染,我们把定时器的返回值赋值给当前操作元素的自定义属性;这样做还有一个好处,就是如果当前动画没有完成,执行了下一个动画,由于我们每一次都是给自己的自定义属性,那么下一个动画开始的时候默认的把当前的动画的结束了;

1 2 3 4 5 6

function (){ window.clearTimeout(curEle.timer); curEle.timer=window.setTimeout(move,15); } move();

大专栏  JS实现动画的四条优化方法e里面不需要传递参数,每一次都用move中存储下来的值即可">3)关于作用域累积的问题->在move中编写一个_move来执行我们的动画操作,_move里面不需要传递参数,每一次都用move中存储下来的值即可

1 2 3 4 5 6 7 8 9

function (target){ ~function _move(){ window.clearTimeout(curEle.timer); // <js code> curEle.timer=window.setTimeout(_move,15); //_move这里不建议使用arguments.callee因为在严格模式下不兼容这个属性,而写在项目中一般都是需要使用严格模式编写代码的 }(); } move();

4)为了防止走一步超了,不走还到不了边界,我们在做边界判断的时候需要加上步长来做

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function (target){ var step=10; ~function _move(){ window.clearTimeout(curEle.timer); var curL=utils.getCss(curEle,"left"); if(curL+step>=target){ utils.setCss(curEle,"left",target); return; } utils.setCss(curEle,"left",curL+step); curEle.timer=window.setTimeout(_move,15); }(); } move();