手写代码系列之防抖与节流

防抖

思路：在规定时间内未触发第二次，则执行

function debounce(fn, delay){
    // 利用闭包保存定时器
    let timer = null;
    return function(){
        let context = this;
        let args = arguments;
        // 在规定时间内再次触发
        // 会先清除定时器再重设定时器
        clearTimeout(timer);
        timer = setTimeout(function(){
            fn.apply(context, args)
        },delay);
    }
}

// 使用举例：
function fn1(){
    console.log("防抖")
}
addEventListener("scroll", debounce(fn1, 1000))

节流

思路：在规定时间内只触发一次

function throttle(fn, delay){
    // 利用闭包保存时间
    let prev = Date.now();
    return function(){
        let context = this;
        let args = arguments;
        let now = Date.now();
        if(now - prev >= delay){
            fn.apply(context, args);
            prev = Date.now();
        }
    }
}

// 使用举例：
function fn2(){
    console.log("节流")
}
addEventListener("scroll", throttle(fn2, 1000))