今天在实现dom对象变速运动的时候发现了一个问题,以下是js代码关于速度的部分:
timer = setInterval(function(){
//...
console.log(oDiv.offsetLeft);//每次跑剩余行程的10分之一,以达到速度减缓的效果
oDiv.style.left = oDiv.offsetLeft+(target-oDiv.offsetLeft)/10+'px';
//...
}, 30);
从效果上看是没问题的,但从日志看很明显就有问题:
可以看出每次移动都是对计算值进行了四舍五入取整,最终当计算值小于0.5时进入了死循环。
解决方法
当计算值小于1的时候统一按1处理
oDiv.style.left = oDiv.offsetLeft+Math.max((target-oDiv.offsetLeft)/10, 1)+'px';