制作缓动动画时遇到的问题及解决办法

一个简单的移动动画函数只需要传递移动目标和移动距离就可以实现，在我学习的过程中遇到了一下几个问题：

1.停止移动

当学习如何实现缓动动画的时候，我遇到的第一个小问题是如何停止setInterval的继续执行，一开始以为只要将目标放到最终位置就可以了，跟着pink的思路是做一个if判断是否到达目标地点，然后清除定时器就可以了

                     //判断是否到达目的地
                if(obj.offsetLeft>=ju)
                {
                    clearInterval(obj.timer)
                }

2.无限接近目标地点的移动

第二个问题就是var =(ju-obj.offsetLeft)/15 这段计算目标移动距离的变量，表面上的效果看起来是实现了目标最终停止，但根据高中学过的一些数学知识就可以推断出这个移动目标是无限接近与最终地点，其中是包含小数的，pink老师给出的解决方法是给每次移动距离求整数就可以了

var x=Math.ceil((ju-obj.offsetLeft)/15)

3.越点移动越快的BUG

点击一次按钮是可以实现盒子移动，但如果点击多次会出现盒子移动速度越来越快的bug，原因是因为多次调用了移动动画函数，所以要解决这个bug，只要在函数的开头清除一次盒子上一次的定时器就好了

        //消除上一次定时器，防止多次点击出现加速bug
            clearInterval(obj.timer)

 好了，这样就可以实现缓动移动的效果了，最后附上示例：

function dong(obj,ju)
        {
            //消除上一次定时器，防止多次点击出现加速bug
            clearInterval(obj.timer)
            obj.timer=setInterval(function(){
                //判断是否到达目的地
                if(obj.offsetLeft>=ju)
                {
                    clearInterval(obj.timer)
                }
                //缓速
                var x=Math.ceil((ju-obj.offsetLeft)/15)
                obj.style.left=obj.offsetLeft+x+'px'
            },15)
        }