【记录知识点】节流阀，逻辑中断

JS代码

// 定义节流阀开关
    let flag=true;
arrow_l.addEventListener('click',function(){
       
        if(flag){
            //开始执行，把开关定义为false,等到点击事件完全结束，利用回调函数设置为false
            flag=false;
            //添加一个判断如果num=最后一张，就利用视觉差异替换到第一张图片，并把索引改为第一张的
            if(num==0){
                ul.style.left=-(ul.children.length-1)*focusWidth+'px';
                num=ul.children.length-1;
            } 
            //没点击一次，索引 就+1
            num--;       
            animate(ul,-num*focusWidth,()=>{flag=true;});
            //需求4,点击右箭头，小圆圈改变效果
            //排他思想，清空所有li样式
            for(let i=0;i<ol.children.length;i++){
                ol.children[i].className='';
            }
            circle=num;
            if(circle==ol.children.length){
                circle=0;
            }
            ol.children[circle].className='current';
        }
    });

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        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();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

 1.节流阀：当上一个动画执行完毕，再执行下一个动画函数，让事件无法连续触发；利用回调函数，添加一个变量来控制函数的执行。

    在事件外部定义一个开关flag为true，而后在点击事件内部添加判断条件，当flag值为true的时候才执行点击事件需求的代码，并将flag更改为false，这样可以避免在当前函数未执行完成前，flag的值一直都是false，就无法连续触发点击。

    而在触发当前点击事件，调用动画函数时，添加回调函数，在执行动画结束后，调用回调函数，将flag更改为true，这样再次点击就可以进行动画的触发。

2.逻辑中断代码

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        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();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

上面定义一个动画函数，第三个参数为一个回调函数，而在内部对于回调函数的调用，实行逻辑中断的方式。

    ‘callback && callback();’中的 && ：当第一个为假时，则直接中断，不执行后面的callback（），

相当于一个if的判断，这种方式显然更加高效。