js 防抖与节流函数

函数防抖和节流是优化高频率执行js代码的一种手段，可以降低资源请求，避免浪费资源，优化体验。

一、防抖函数

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 即在n秒内连续触发的事件，只在最后一次执行。

function debounce(func, delay){ let timer = null return function(...args){ if (timer) clearTimeout(timer) timer = setTimeout(() => { func.apply(this,args) }, delay) } }

应用场景：

搜索框搜索输入。只需用户最后一次输入完，再发送请求。手机号、邮箱等输入时的实时验证 。窗口大小事件onresize，只需窗口调整完成后，计算窗口大小，防止重复渲染。

二、节流函数

每隔一段时间，只执行一次函数。

function throttle(func, delay){ let timer = null return function(...args){ if (timer) return timer = setTimeout(() => { func.apply(this, args) timer = null }, delay) } }

应用场景：

滚动加载，加载更多或滚到底部监听谷歌搜索框，搜索联想功能高频点击提交，表单重复提交