JavaScript性能优化之函数节流（throttle）与函数去抖（debounce）

debounce

在 JavaScript 中，debounce 函数所做的事情就是，强制一个函数在某个连续时间段内只执行一次，哪怕它本来会被调用多次。我们希望在用户停止某个操作一段时间之后才执行相应的监听函数，而不是在用户操作的过程当中，浏览器触发多少次事件，就执行多少次监听函数。
function debounce(fn, delay) {
let timer;
return () => {
clearInterval(timer);
timer = setTimeout(() => {
fn.apply(this, arguments)
}, delay)
}
}

throttle

throttle的概念理解起来更容易，就是固定函数执行的速率，即所谓的“节流”。正常情况下,mousemove的监听函数可能会每 20ms（假设）执行一次，如果设置 200ms 的“节流”，那么它就会每 200ms 执行一次。比如在 1s 的时间段内，正常的监听函数可能会执行 50（1000/20） 次，“节流” 200ms 后则会执行 5（1000/200） 次。 function throttle(fn, threshhold) {
let last;
let timer;
threshhold || (threshhold = 250)
return() => {
let now = +new Date();
if(last && now < last + threshhold) {
clearInterval(timer);
timer = setTimeout(() => {
last = now;
fn.apply(this, arguments)
})
} else {
last = now;
fn.apply(this, arguments)
}
}
}