介绍
Throttle和Debounce很相似，都是用于连续快速触发事件的场景中，但二者的具体功能并不相同。
节流(Throttle)
我们会事先指定一个时长delay，当用户连续快速地触发某个事件的时候，只会依照delay定期执行。通过Throttle则可以实现这样的效果。
示意图：
代码：
<button id='mybtn'>click me</button>
const throttle = (fn, delay) => {
let last = 0;
return () => {
let now = new Date().getTime();
if (now - last < delay) return;
last = now;
return fn();
}
}
document.getElementById('mybtn').addEventListener('click', throttle(e => {
console.log('clicked!');
}, 5000))
防抖(Debounce)
同样地，我们也会事先指定一个时长delay，当用户连续快速地触发某个事件的时候，只有间隔时间大于delay的时候才会执行一次。这样的效果则是由Debounce实现的。
示意图：在线演示
Debounce可以分成两种，一种是非立即执行，一种是立即执行。
看图更加直观，非立即执行：
立即执行：
非立即执行版代码：
<button id='mybtn'>click me</button>
const debounce = (fn, delay) => {
let timeoutID;
return () => {
clearTimeout(timeoutID);
timeoutID = setTimeout(fn, delay);
}
}
document.getElementById('mybtn').addEventListener('click', debounce(e => {
console.log('clicked!');
}, 1000))
总结
- throttle：连续快速触发事件时，将定期执行。
- debounce：连续快速触发事件时，只有在间隔时间大于delay时才执行。
