防抖和节流的目的都是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。 一、函数防抖 定义在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。 实现原理 ...

Vue函数防抖和节流https://zhuanlan.zhihu.com/p/72363385 ...

故事背景： 项目有个需求是输入框在输入的时候进行搜索，展示下拉数据，但是没必要输入一个字都进行搜索，所以想到了在输入结束200毫秒后再进行搜索，从而引出来了 js的节流(throttle)，防抖（debounce），在网上想找个现成的用下，但是好多都不对，于是就自己搞了。 先看看概念 函数防 ...

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 使用场景：频繁触发、输入框搜索 因为防抖的特性，一直执行最后一次的触发，所以可以用于鼠标移动确定最后一次移动的时候的坐标位置。 实例 节流：高频事件触发，但在n秒内 ...

在开发中，我们常常会去监听滚动事件或者用户输入框验证事件，如果事件处理没有频率限制，就会加重浏览器的负担，影响用户的体验感， 因此，我们可以采取防抖（debounce）和节流（throttle）来处理，减少调用事件的频率，达到较好的用户体验。 防抖（debounce）： 　　在事件被触发 ...

在开发中，我们常常会去监听滚动事件或者用户输入框验证事件，如果事件处理没有频率限制，就会加重浏览器的负担，影响用户的体验感， 因此，我们可以采取防抖（debounce）和节流（throttle）来处理，减少调用事件的频率，达到较好的用户体验。 防抖（debounce）： 　　在事件被触发 ...

// 防抖函数 function debounce(fn, delay) { let timer = null return () => { clearTimeout(timer) timer = setTimeout(()=>{ fn() }, delay) } } 实现思路 ...

安装依赖 区别: 函数节流在特定时间内触发一次任务,并且是规律的 函数防抖只有最后一次延时时间到达之后执行一次 应用场景: throttle 鼠标不断点击触发，mousedown(单位时间内只触发一次) 监听滚动事件，比如是否滑到底部 ...