复习笔记之API(16) JS动画补充

给动画函数添加回调函数

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

• 回调函数写的位置：定时器结束的位置

<style>
    div {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>
<button class="one">跑到500的位置</button>
<button class="two">跑到1000的位置</button>
<div></div>
<script>
    let div = document.querySelector('div'),
        btn = document.querySelector('.one'),
        btn2 = document.querySelector('.two');
    function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            // 步长值写到定时器的里面
            let step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                // 停止动画 本质就是停止定时器
                clearInterval(obj.timer);
                // 判断回调函数是否存在
                /* if(callback){
                    // 调用函数
                    callback();
                } */
                callback && callback(); //两种写法一样，这种写法更装逼一点^-^
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 15);
    }
    btn.addEventListener('click', function () {
        animate(div, 500);
    })
    btn2.addEventListener('click', function () {
        animate(div, 1000, function() {
            div.style.backgroundColor = 'blue';
        });
    })
</script>

动画函数封装到单独的JS文件里

因为以后经常使用这个动画函数，可以单独封装到一个JS文件里，使用的时候调用这个JS文件即可

节流阀

防止轮播图按钮连续点击造成的播放过快

• 节流阀的目的：上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发
• 核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数
  • 开始设置一个变量let flag = true
  • if(flag){flag=false; do something} 关闭水龙头
  • 利用回调函数 动画执行完毕，flag = true 打开水龙头