js 实现函数防抖(debounce)和函数节流(throttle)

一、函数防抖(debounce)

函数防抖:函数只有在空闲足够的时间时才执行,空闲时长不够就不执行。

应用场景:

  • 实时搜索(keyup、input)
  • 拖拽(mousemove)
/**
 * 函数防抖 debounce
 * @param {Object} func 要执行的函数
 * @param {Object} wait 延迟时间
 * @param {Object} immediate 是否立即执行
 */
function debounce(func, wait, immediate) {

    var timeout, result;

    var debounced = function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已经执行过,不再执行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
        return result;
    };

    debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
    };

    return debounced;
}

/**
 * 使用示例:
 */
var count = 1;
var container = document.getElementById('container');
function getUserAction(e) {
    container.innerHTML = count++;
};
var setUseAction = debounce(getUserAction, 10000, true);
container.onmousemove = setUseAction;
document.getElementById('button').addEventListener('click', function(){
    setUseAction.cancel();
})

二、函数节流(throttle)

函数节流:函数只有在大于等于执行周期时才执行,周期内不执行。

应用场景:

  • 窗口调整(resize)
  • 页面滚动(scroll)
  • 抢购疯狂点击(mousedown)
/**
 * 函数节流 throttle
 * @param {Object} func 要执行的函数
 * @param {Object} wait 等待时间
 * @param {Object} options 配置项,配置是否立即/延迟执行
 * {leading: false} 表示禁用第一次执行;{trailing: false} 表示禁用停止触发的回调(二选一)
 */
function throttle(func, wait, options) {
    var timeout, context, args, result;
    var previous = 0;
    if (!options) options = {};

    var later = function() {
        previous = options.leading === false ? 0 : new Date().getTime();
        timeout = null;
        func.apply(context, args);
        if (!timeout) context = args = null;
    };

    var throttled = function() {
        var now = new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }
    };
	
	throttled.cancel = function() {
	    clearTimeout(timeout);
	    previous = 0;
	    timeout = null;
	}
	
    return throttled;
}

/**
 * 使用示例:
 */
var count = 1;
var container = document.getElementById('container');
function getUserAction(e) {
    container.innerHTML = count++;
};
// 有头有尾:第一次执行,停止后还会执行一次
container.onmousemove = throttle(getUserAction, 1000);
// 无头有尾:禁用第一次执行
container.onmousemove = throttle(getUserAction, 1000, {
    leading: false
});
// 由头无尾:禁用停止后的执行
container.onmousemove = throttle(getUserAction, 1000, {
    trailing: false
});

参考资料:
JavaScript专题之跟着 underscore 学防抖
JavaScript专题之跟着 underscore 学节流

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值