js-函数防抖

函数防抖（debounce）是一种常用的编程技术，用于限制某个函数在短时间内的频繁触发，常常应用于性能优化和避免不必要的计算或操作。其核心思想是，如果一个函数持续地、频繁地触发，那么只在最后一次触发后，等待一定的延迟时间再执行该函数，如果在这个延迟时间内又触发了该函数，则重新计算延迟时间。

实现一个功能：用户在文本框中输入停止一秒后打印文本框中内容，如果在一秒内用户持续输入，计时器重新计时

<script>
  const dom = document.querySelector('input')
  
  function debounce(func, wait) {
    let timer = null
    return function (e) {
      clearTimeout(timer)
      const inputThis = this
      timer = setTimeout(() => {
        func.apply(inputThis, [inputThis.value, e])
      }, wait);
    }
  }

  const handler = debounce((text, e) => {
    console.log(text)
    console.log(e)
  }, 1000)

  dom.addEventListener('input', handler)

</script>

防抖函数的主要应用场景包括：

1.输入框实时搜索：用户在输入框中输入文字时，可能希望等用户输入完毕后才发起搜索请求，而不是每次键入一个字符就发起一次请求。这样可以减少服务器的压力，并提高用户体验。

2.窗口大小调整事件：当浏览器窗口大小调整时，可能会触发多次resize事件。使用防抖可以确保只在调整完成后执行一次回调函数。

3.滚动事件：在滚动页面时，滚动事件会频繁触发。防抖可以用于限制某些回调函数的执行频率，如懒加载图片或检测页面位置。

函数防抖的基本实现原理是设置一个定时器，在每次函数调用时清除之前的定时器并重新设置，以确保只有在最后一次函数调用后，定时器才会触发并执行目标函数。这样，如果在设定的防抖时间内函数被多次调用，那么只有最后一次调用会被执行。