详解防抖函数（debounce）和节流函数（throttle）

本文介绍: 详解防抖函数（debounce）和节流函数（t hr o t tle）

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

列举: 打个比方，坐公交，司机需要等最后一个人进入才能关门。每次进入一个人，司机就会多等待几秒再关门。

为了方便理解，我们首先通过一个可视化的工具，感受一下三种环境（正常情况、函数防抖情况 debounce、函数节流 t hr o t tle）下，对于mouse m ov e 事件回调的执行情况。

竖线的疏密代表事件执行的频繁程度。可以看到，正常情况下，竖线非常密集，函数执行很频繁。而 deb ounce （函数防抖）则很稀疏，只有当鼠标停止移动时，才会执行一次。t hr o t tle（函数节流）分布的较为均匀，每过一段时间就会执行一次。

const debounce = (func, wait) =&gt; {
    let timer
    return () =&gt; {
		clearTimeout(timer)
        timer = setTimeout(func, wait);
    }
}

function debounce(fn, delay = 500) {
    // timer 是在闭包中的
    let timer = null;
    
    return function() {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() =&gt; {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

// test debounce 返回一个函数
input1 = document.getElementById('input1')
input1.addEventListener('keyup', debounce(function () {
    console.log(input1.value)
}, 600))

防抖解释：当按下某个键的时候触发 keydown 事件，并执行回调。timer 默认为 null，在 return 的函数中定时器 timer 被赋值，如果在 delay 延迟之内再次触发了 key down 事件，那么 timer 就会被重置为null…，当用户输入完成之后（dela y 时间已过），那么就会触发 de bounce 中的回调函数，也就是 key down 最终要执行的事件。

const throttle = (func, wait) =&gt; {
    let timer;
    
    return () => {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            func();
            timer = null
        }, wait)
    }
}

function throttle(fn, delay) {
    let timer = null
    
    return function() {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        })
    }
}
// test
let div1 = document.getElementById('div1')
div1.addEventListener('drag', throttle(function(e) {
    console.log(e.offsetX, e.offsetY)
}, 100))