JS 函数防抖、函数节流

场景

在我们日常开发中，有许多场景都会导致同一事件被频繁触发，严重的会导致浏览器崩溃。

• Window对象的resize、scroll事件
• 拖拽时元素时的mousemove事件
• 按键的mousedown、keydown、keyup事件
• …

解决

那么，为了避免性能过差或者浏览器崩溃，就有了防抖、节流一说

debounce(防抖)

当调用函数n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。这种比较适合window的resize事件，实际需求大多为停止改变大小n毫秒后执行后续处理。

function debounce(fn, wait) {
    var timer = null;
    return function () {
        var context = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        timer = setTimeout(function () {
            fn.apply(context, args)
        }, wait)
    }
}

throttle(节流)

当连续调用函数时，再计时器的周期内只会执行函数一次。

function throttle(fn, wait) {
    var timer;
    return function () {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function () {
                timer = null;
                fn.apply(context, args);
            }, wait);
        }
    };
};

使用

配合jquery

// 防抖
$(window).resize(debounce(function () {
    console.log('window, resize');
}, 300))

// 节流
$('input').keyup(throttle(function(){
    console.log($(this).val());
}, 300))