【JavaScript】防抖&节流速记-CSDN博客

本文链接：https://blog.csdn.net/KevinSJF/article/details/130246628

从英文出发 debounce & throttle

做开发英文多少都能基本过关,比如我,就不认识这俩单词,但是大致有点感觉,结合中文意思倒推,防抖就是防止抖动,比如开心的英文是happy,不开心就是unhappy.

同理,这个debounce就是防止/阻止/不抖动

throttle这个单词跟咽喉throat有点像,猛喝一大口水流过细细的嗓子,必须节流,不然就呛着了 ~~疑车无据怎么说~~

日常开发用的地方确实不多,也许一个项目能用几次,但每个项目周期不可能很短,所以我总是用一次查一下看看记没记错,这次决定形象的记忆一下

当然离不开前面对英文的深刻记忆 = =

进入正题二者根据个人理解结合现实经验如下

防抖(debounce)-抖完再操作

官方点: 当一个动作连续触发，只执行最后一次

那如何更容易,印象深刻,通俗易懂,最好跟游戏沾点方便我以后一想起来防抖就不会混淆呢?

你抖任你抖,抖完我再搭理你,再形象一点记忆就好比玩mmorpg游戏,玩家跑动的时候会把手里那把炫酷发光+15的武器收起来跑,不然容易重心不稳平地摔,当站定了之后就会有一个炫酷的特效,武器缓缓从背后拉出来,从身前划一道优雅的弧线,然后拿在手里. 当我短时间疯狂点击移动键跑-停-跑-停-跑-停切换的时候,我的剑就来不及扒出来,是这个道理吧,我就只能在原地疯狂抽搐,最后站定后,才进行炫酷的拔剑姿势!

这就是防抖的游戏体现~~俺也不知道,应该是吧~~

代码实现如下:

function debounce(fn,delay){
    let timer = null
    return ()=>{
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this,arguments)
            timer = null
        }, delay);
    }
}

节流(throttle)-操作之后有冷却

官方点: 就是限制一个动作在一段时间内只能执行一次

节流我也想向上面一样更容易,印象深刻,通俗易懂,主要是想跟游戏沾点边

那咱就不玩mmorpg了,直接玩lol/data/王者荣耀得了!

技能CD! 技能CD! 技能CD!

我的1技能冷却时间4秒钟,当我放了1技能之后,疯狂按11111111111,也放不了了,因为节流了,1技能放完冷却期内,无法再次释放.nice

代码实现如下:

function throttle (fn,delay){
    let timer = null
    return ()=>{
        if (timer){return}
        timer = setTimeout(() => {
            fn.apply(this,arguments)
            timer = null
        }, delay);       
    }
}