我的代码:防抖和节流

270 阅读1分钟

防抖

一个连续操作中的处理,只触发一次,从而实现防抖动。

/**
 * 思路:在事件被触发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);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

节流

一个连续操作中的处理,按照阀值时间间隔进行触发,从而实现节流

/**
 * 思路:预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行
 * @desc 函数节流
 * @param func 函数
 * @param wait 执行周期毫秒数
 */
function throttle(fn, wait) {
    let prev = new Date();
    return function() {
        const args = arguments;
        const now = new Date();
        if(now - prev > wait) {
            fn.apply(this, args);
            prev = new Date();
        }
    }
}

连续操作:两个操作之间的时间间隔小于设定的阀值,这样子的一连串操作视为连续操作。