js实现防抖与节流

防抖与节流

防抖：

当事件被触发的时候，设定一个周期，如果这个周期之内，这个事件又被触发了，那么就在设定一个周期，一直到这个周期内这个事件不在被触发，才会执行这个事件

手写：

function debounce (fun, delay) {
 //防抖函数需要传入2个参数，一个为事件函数，一个为周期时间
	const _this = this; //先将this保存下来，保持this的指向相同
    const timer = null; //设定一个定时器，当调用的时候西安清空定时器
    return function() { //返回一个函数
        const args = arguments; //需要对fn的参数进行保存
        if(timer) { // 如果定时器存在的话，我们需要对定时器进行清空，重新计时
            clearTimeout(timer)
        }
        timer = setTimeout( () => {
            fun.call(_this, ...args); //执行事件函数，需要用到之前保存的this和arguments
        }, delay)
    }
}

节流：

当事件被触发的时候，设定一个事件周期，不管期间这个事件被触发了多少次，到了这个时间，就会执行一次事件。之后如果还有事件的触发，就再重新设定一个周期，到时间执行。

手写：

function throttle(fun, delay) {
    let _this = this; //也是需要对this进行保存
    let timer = null;
    return function() {
        const args = arguments;
        if(!timer) { //直到定时器不存在，需要先设置一个新的定时器
            timer = setTimeout( () => {
                timer = null; //需要将定时器清零
                fun.call(_this, ...args); //执行我们的事件函数
            }, delay)
        }
    }
}