防抖与节流的实现

防抖与节流的实现

防抖和节流的作用是避免事件被高频触发时带来的大量资源消耗，典型的应用场景就是鼠标频繁地点击某个按钮。当一个事件被触发时，防抖函数需要设置一个定时器，如果在指定的时间间隔内事件没有被再次触发就执行回调函数，否则应该清除并重新设置定时器。总而言之，防抖函数需要完成两个功能：1.当事件被触发时，不立即执行回调函数。2.在指定的时间间隔内事件没有被再次触发，执行回调函数。

// 防抖功能的实现
const deBounce = function (fn, delay) {
    let timeOut = null; //定时器
    return function () {
        // 如果事件被再次触发，清除定时器
        if (timeOut) {
            clearTimeout(timeOut);
        }
        
        // 设置定时器，如果在指定时间间隔内事件没有被触发则执行回调函数fn
        timeOut = setTimeout( () => {
            fn.apply(this, arguments);
        }, delay);
    }
}

节流的作用在于避免回调函数随着事件的高频触发被高频执行。节流函数需要完成两个功能：1.当事件被触发时，等待一段时间再执行回调函数。2.当事件被多次触发时，在指定的时间间隔内回调函数只能被执行一次。

const throttle = function (fn, delay) {
    // canRun表示回调函数是否可以被执行
    let canRun = true;
    return function () {
        //如果canRun为false，代表此时不能执行回调函数
        if (!canRun) {
            return;
        }
        
        // 将canRun设置为false，避免回调函数在某一时间段内被多次执行
        canRun = false;
        
        // 即使可以执行回调函数也需要等待一段时间再执行
        setTimeout( () => {
            fn.apply(this, arguments); //执行回调函数
            canRun = true; // 回调函数执行完毕后需要将canRun设置为true
        }, delay);
    }
}