在某些时候，某些事件会频繁的触发，影响性能，所以需要防抖操作来进行性能优化。 比如用户在输入框中输入内容而输入框会给出相关内容，此时如果监听input的内容变化则会多次触发对应事件，而这些事件是我们不希望触发的。我们希望当input框的内容改变并且一定时间内不再改变时，才将相关内容渲染在页面上。 此时就可以用到函数防抖和函数节流。
一、函数防抖 函数防抖重点在于有足够的时间间隔才触发某个回调。 实现方法的核心在于延时器的注销和重新注册。 函数防抖
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
function debounce (func, delay) { let timer = null return function (...ars) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { func.apply(this, args) }, delay) } }应用场景
1.搜索联想 2.window触发resize
二、函数节流 函数节流的重点在于在一定的时间内只触发一次回调。 实现方法的核心在于一旦有延时器就直接返回。
函数节流
规定在一个单位时间内，只能触发一次函数。
function throttle(func, wait) { let timer return function(...args) { if (timer) { return } timer = setTimeout(() => { func.apply(this, args) timer = null }, wait) }; };应用场景
1.上拉加载更多 2.鼠标的点击事件，防止双击
