手写原理 | 防抖节流

防抖

事件触发n秒之后再执行，如果n秒内有触发就重新计时

function debounce(fn, delay) {
 	let timer;
    // 这里的this指向window
    return function() {
        // 这里this指向要接收事件的HTML元素，比如我们给button绑定一个click事件并应用节流，那么这里的this就指向bnt
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            // 原本setTimeout的this是指向window的，但是这里用了箭头函数，所以也是指向bnt
            fn.apply(this, arguments);
            timer = null;
        }, delay)
    }
}

节流

事件被连续触发但是n秒内只执行一次

function throttle(fn, delay) {
    // 这里的this指向window
    let timer;
    
    return function() {
        // 这里this指向要接收事件的HTML元素，比如我们给button绑定一个click事件并应用节流，那么这里的this就指向bnt
        if (timer) {
            return;
        }
        
        timer = setTimeout(() => {
            // 原本setTimeout的this是指向window的，但是这里用了箭头函数，所以也是指向bnt
            fn.apply(this, arguments);
            timer = null;
        }, delay)
    }
}