JavaScript防抖(王者荣耀回城)、节流（王者荣耀技能读条）

原创已于 2022-05-09 16:08:58 修改 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-04-25 10:52:33 首次发布

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

本文通过王者荣耀的回城和妲己一技能为例，介绍了前端开发中防抖(debounce)和节流(throttle)的概念及其应用场景。防抖技术确保了回城操作在多次快速触发后只执行最后一次，而节流则保证了妲己一技能在释放过程中，即使多次点击也只执行首次，避免了无效的资源消耗。这两个技术在优化用户交互体验和控制资源使用上具有重要意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖(王者荣耀回城)

回城按一次读条八秒钟，回到一半，在按一次回城开始重新读条八秒，多次猛按回城，不回家，开启嘲讽，重复开始读条

<button id="btn"> 回城</button>

var BtnBtn = document.getElementById("btn")
var fu = function () {
    console.log("回城成功")
}
BtnBtn.onclick = function () {
    b()
}
var b = debounce(fu, 8000)
function debounce(fun1, wait) {
    var timer;
    var timer2;
    var i = 0;
    return function () {  //返回一个函数，使用变量接受后执行
         if (timer) { //如存在定时进行清除
            clearTimeout(timer)
            clearTimeout(timer2)
            i=0
        }
        // 防抖功能
        timer = setTimeout(function () {
            fun1();
        }, wait);
        // 回城功能
        timer2 = setInterval(function () {
            ++i;
            if (i == 8) {
                console.log("______")
                clearTimeout(timer2)
                i = 0 //闭包变量，暂用内存一直存在，清零
            } else {
                console.log(i)
            }
        }, 1000)
    }
}

节流（王者荣耀技能读条）

妲己放一技能读条一秒钟，读条期间，多次猛按一技能，只执行第一次，等第一次放的技能放出来之后，再次放技能，再次开始读条

<button id="btn"> 妲己一技能读条</button>

var BtnBtn = document.getElementById("btn")
var fu = function () {
    console.log("打他成功")
}
BtnBtn.onclick = function () {
    q()
}
var q = throttle(fu, 1000)
function throttle(fun, wait) {
    var timer;  //开   timer=undefined
    var timer2;
    var i = 0;
    return function () {
        if (!timer) { //判断timer是否有值（当前是否已经开启了定时器） ，
            timer = setTimeout(function () { //关
                fun();
                timer = undefined; //开
                clearTimeout(timer2)
                i = 0;
            }, wait)
            timer2 = setInterval(function () {
                i += 100;
                console.log(`${i}毫秒`)
            }, 100)
        }else{
            console.log("正在放技能阿，累死了")
        }
    }
}