[JavaScript知识库]防抖节流（借鉴）

原文 https://blog.csdn.net/weixin_43967603/article/details/104413668
防抖函数分为非立即执行版和立即执行版
//非立即执行版本
function debounce(fn, delay) {
    let timeout; // 创建一个标记用来存放定时器的返回值
    return function () {
        clearTimeout(timeout); // 每当事件触发的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
            fn.apply(this, arguments);
        }, delay);
    };
}

window.onscroll = debounce(showTop,1000)

//立即执行版本
function debounce(fnc, delay) {
    let timeout;
    return function () {
        clearTimeout(timeout);	//每次触发清除上次计时器

        if (!timeout) fnc.apply(this, arguments)		//如果 timeout 没有重置为 null 则执行函数

        timeout = setTimeout(() => {	//计时结束后 timeout 置为 null
            timeout = null;
        }, delay)

    }
}
window.onscroll = debounce(showTop, 1000)
节流
function debounce(fnc, delay) {
    let done = 1;		//记录是否可执行
    return function () {
        if(done) {
            fnc.apply(this, arguments)
            done = 0		//执行后置为不可执行
            setTimeout(()=>{		//计时结束后再置为可执行
                done =1
            }, delay)
        }
    }
}
window.onscroll = debounce(showTop, 1000)
防抖 和 节流 的区别
比如我们在抢票，我们在狂点 ‘抢票’ 这个按钮
?防抖（非立刻执行）：不管你狂点多少次，我只等你不狂点了才提交你的最后一次点击
?防抖（立刻执行）：不管你狂点多少次，我只提交你的第一次
?节流：不管你狂点多少次，一定时间内只算你一次

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖