JS的防抖函数理解、手动封装

1. 认识防抖函数

• 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
• 当事件密集触发时，函数的触发会被频繁的推迟；
• 只有等待了一段时间也没有事件触发，才会真正的执行响应函数；

举个例子，防抖函数的引用场景:

• 输入框中频繁的输入内容，搜索或者提交信息； 
• 频繁的点击按钮，触发某个事件；
• 监听浏览器滚动事件，完成某些特 定操作；
• 用户缩放浏览器的resize事件；

在输入框频繁输入内容时，并不会输入一次就触发一次对应需要的操作，而是等待一定时间，待用户在这段时间内没有输入时，才会触发事件，就是通过防抖函数，实现在输入等待一段时间后，触发事件，不会频繁触发输入框的输入事件，这样很浪费性能，造成服务器的请求压力；

手写简单实现防抖函数：

function debounce(fn, delay) {
  // 定义一个定时器，保存上一次的定时器
  let timer = null
  const _debounce = function (...args) {
    // 取消上一次的定时器
    if(timer) clearTimeout(timer)
    // 延迟执行
    timer = setTimeout(() => {
      // 外部传入的真正要执行的函数
      fn.apply(this, args)
    }, delay)
  }
  return _debounce
}