缓动动画添加回调函数

回调函数原理：

函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。

回调函数写的位置：

定时器结束的位置。

效果：

代码：

<script>
            function animate(obj, target, callback){
                clearInterval(obj.timer);
                obj.timer = setInterval(function(){
                    //计算步长值
                    //把步长值改成整数,不要出现小数问题
                    var step = (target - obj.offsetLeft) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    if(obj.offsetLeft == target){
                        // 停止动画本质上是停止定时器
                        clearInterval(obj.timer);
                        if(callback){
                            //调用函数
                            callback();
                        }
                    }
                    obj.style.left = obj.offsetLeft + step + 'px';
                },10);
            }
            var div = document.querySelector('div');
            var btn1 = document.querySelector('.btn1');
            var btn2 = document.querySelector('.btn2');
            //调用函数

            btn1.addEventListener('click', function(){
                animate(div, 500);
            });
            btn2.addEventListener('click', function(){
                animate(div, 800, function(){
                    div.style.backgroundColor = 'pink';
                });
            });
        </script>