面试之手写防抖节流 (6)

我们还可以为其添加取消的功能。

function debounce(fn, wait = 1000, immediate = false) { let timer = null; function debounced(...args) { // 重置计时器 if (timer) clearTimeout(timer); // 首次立即执行 if (immediate && !timer) { fn.apply(this, ...args); timer = setTimeout(() => { timer = null; }, wait); return; } // 新计时器 timer = setTimeout(() => { fn.apply(this, ...args); timer = null; }, wait); } debounced.cancel = () => { clearTimeout(timer); timer = null; }; return debounced; }

此时一个功能完备的debounce函数就完成了。

节流 概念

多次触发同一个函数，同一段时间内只执行一次。

举例：获取验证码很多都会限制 60s 的时间，在 60s 内再次获取验证码是无效，只能获取一次。下个60s才能再次获取。

效果演示

节流前