防抖跟节流永远不会弄混的记忆方法

346 阅读1分钟

我是一个前端老菜鸡,这是我第一篇文章,写点超级简单的东西。

防抖跟节流不是很复杂的东西,但是我由于他们十分相似在我初学时经常把他们弄混。

直到我把他们当成游戏中带有cd瞬发技能跟需要一段时间吟唱才能施法的技能我才没有弄混过。

防抖 ≈ 吟唱技能施法

防抖就像是游戏中的吟唱施法

如果说吟唱时间是两秒钟,那吟唱两秒钟之后才能施法

但是如果在吟唱过程中再次触发技能 则会打断现在的吟唱 重新开始吟唱

//fun表示游戏技能 chantTime吟唱时间
function debounce(fun, chantTime) {    
    // chantOut表示吟唱过程
    let chantOut = null; //初始化吟唱过程
    return function () {
        if (chantOut) {
            // 如果吟唱过程已经开始 
            clearTimeout(chantOut); //打断吟唱过程
            chantOut = setTimeout(()=>{
               fun();
               chantOut = null;//初始化吟唱过程
            }, chantTime); //重新开始吟唱
        } else {
            chantOut = setTimeout(()=>{
               fun();
               chantOut = null;//初始化吟唱过程
            }, chantTime); //开始吟唱
        }
    }
}

节流 ≈ 施法CD

节流就像是游戏中施法CD

如果CD时间时2秒钟,那10秒钟之内你疯狂的摁技能也只能最多触发5次

function throttle(fun, cdTime) {
    // ifCdFinish表示cd是否完成;
    let ifCdFinish = true; //cd初始化
    return function () {
        if (!ifCdFinish) {  
            console.log('技能cd中')
            return false;
        }
        技能cd开始
        ifCdFinish = false;
        fun(); // 技能释放
        setTimeout(() => { 
            ifCdFinish = true; //技能cd重置
        }, cdTime)
    }
}

希望方便大家的理解,防抖跟节流还有很多其他的写法跟变种,大家可以参考其他的文章。

希望这不是懒惰的我的最后一篇文章。