原生JavaScript实现函数的防抖和节流

原生JavaScript实现函数的防抖和节流

参考：https://www.jianshu.com/p/c8b86b09daf0

想详细了解的直接戳上面链接了，讲得非常清楚。下面只给代码和我自己写的注释，帮助理解背后实现的逻辑。

---

防抖（Debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行(前沿触发)，false 表非立即执行（后沿触发）
 */
function debounce(func,wait,immediate) {
    let timeout;

    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout); // timeout是定时器ID，只有初始化状态下第一次触发的时候才不会执行；后续在周期内触发db函数会清除定时器，避免在周期内初始化timeout导致事件函数被执行
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null; // 如果周期内db函数未触发，则重新初始化timeout
            }, wait)
            if (callNow) func.apply(context, args) // 初始化状态下，立即执行事件函数
        }
        else {
            timeout = setTimeout(function(){ // 在周期内db函数被触发会更新定时器，延迟事件函数的执行
                func.apply(context, args)
            }, wait);
        }
    }
}

节流（Throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版（前沿触发），2 表定时器版（后沿触发）
 */
function throttle(func, wait ,type) {
    if(type===1){
        let previous = 0;
    }else if(type===2){
        let timeout;
    }
    return function() {
        let context = this;
        let args = arguments;
        if(type===1){
            let now = Date.now();

            if (now - previous > wait) { // 初始状态下先执行一次事件函数，并且以当前时间戳为时间起点，往后只有经过的时间大于一个周期后触发th函数才会更新时间的起点并且执行事件函数
                func.apply(context, args);
                previous = now;
            }
        }else if(type===2){
            if (!timeout) { // 初始状态下设置定时器，只有在定时器执行后（执行时间函数+初始化状态）才能重新设置
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }
    }
}

转载于:https://www.cnblogs.com/simpul/p/11220660.html