防抖与节流的差异、实现与典型业务场景。

[问答题]

防抖与节流的差异、实现与典型业务场景。

查看答案及解析

安吉拉娜娜

防抖：连续触发延迟执行，在最后一次触发的ns后执行。【冷静后执行】节流：可以实现先触发一次或否，然后固定间隔内只执行一次【控制执行频率】 function debounce(fn, timeout) { let timer = null return function(...args){ clearTimeout(timer) timer = setTimeout(() => { fn.apply(this, args) }, timeout) } } function throttle (fn, timeout) { let timer = null return function (...args) { if (timer) return fn.apply(this, args) timer = setTimeout(() => { timer = null }, timeout) } }

发表于 2025-11-04 23:45:59 回复(0)

DRZv

1. 差异 - 防抖：触发后延迟执行，重复触发重置延迟（“冷静后执行”）； - 节流：固定间隔内只执行一次（“控制执行频率”）。 2. 实现（JS精简版） - 防抖： const debounce = (fn, delay) => { let t; return (...args) => (clearTimeout(t), t = setTimeout(() => fn(...args), delay)); }; - 节流： const throttle = (fn, interval) => { let last = 0; return (...args) => { const now = Date.now(); now - last >= interval && (fn(...args), last = now); }; }; 3. 业务场景 - 防抖：搜索输***想、窗口resize、按钮防重复提交； - 节流：滚动加载、高频点击（抢购）、鼠标拖拽。

发表于 2025-11-03 06:50:49 回复(0)