JavaScript基础 - 手写节流和防抖函数

节流和防抖，都是为了降低请求频率，减少不必要的损耗。
原则：既要实现节流和防抖的功能，还要保证不对事件处理函数本身的执行上下文产生影响。

防抖 (debounce)

短时间大量触发同一事件，只执行一次函数，实现延迟执行。
具体实现：
每次触发一个事件（比如点击按钮），都重新开始计时（重新设置计时器），
直到xx毫秒内没有下一次操作，才执行这个事件的处理程序。

v0:

function debounce(fn) {
    return function() {
        setTimeout(() => {
            fn();
        }, 1000)
    }
}
const ele = document.getElementById("debounce");
ele.addEventListener("click", debounce(fn));
function fn() {
    console.log("clicked");
}

在debounce()函数中返回了一个函数，这个函数用做事件处理程序，它启动一个定时器，
当计时结束时执行传入的函数fn；

这个版本虽然实现了延时执行，但是没有在每次触发后重置定时器，改进如下

function debounce(fn) {
    let id = null; // 第一次执行时的id为null
    return function() {
        clearTimeout(id);
            id = setTimeout(() => {
                fn();
            }, 1000);
        }
}
const ele = document.getElementById("debounce");
ele.addEventListener("click", debounce(fn));
function fn() {
    console.log("clicked");
}

这样做仍然不完善，因为这里的 fn 作为实际上的事件处理函数，它的
this 指向 window（非严格模式），而不是事件侦听器绑定到的对象；
而且如果向防抖处理后的函数传入参数，fn 将无法接收到。

再改进如下：

function debounce(fn) {
    let id = null; 
    return function() {
        clearTimeout(id);
        id = setTimeout(() => { 
        /* 箭头函数没有自己的 this和 arguments */
            handleChange.call(this, arguments);
        }, 400);
    }
}

节流 (throttle)

节流即每隔一个时间间隔，执行一次任务。
按照上面的思路，给出两种写法：
写法1:
这个写法与防抖很相似，区别只在于定时器的处理。

function throttle(fn) {
    let timeout = null;
    return function() {
        if(!timeout) {
            timeout = setTimeout(()=>{
                timeout = null;
                fn.call(this, arguments);
            }, 400);
        }
    }
}

写法2:

function throttle(fn) {
    let prev = 0;
    return function() {
        let now = Date.now();
        if( now - prev > 400 ) {
            fn.call(this, arguments);
            prev = now;
        }
    }
}