防抖节流防抖(参数也要指定) 防抖(参数也要指定) 防抖(参数也要指定) 防抖(参数也要指定) 防抖(参数也要指定)

防抖(参数也要指定)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <button>点击按钮</button>
    <script>
      function debounce(callback, delay) {
        // 返回事件监听函数 ==> 每次事件发生都会执行
        return function (event) {
          // console.log('---debounce')
          // 如果还有未执行的定时器, 清除它
          if (callback.timeoutId) {
            clearTimeout(callback.timeoutId)
          }
          // 启动延时delay的定时器, 并保证定时器id
          callback.timeoutId = setTimeout(() => {
            // 执行处理事件的函数
            console.log(event)
            callback.call(event.target, event)
            // 删除保存的定时器id
            delete callback.timeoutId
          }, delay)
        }
      }
      const button = document.querySelector('button')
      const that = this
      let aa = () => {
        console.log('请点击我')
      }
      button.addEventListener('click', debounce(aa, 2000))
    </script>
  </body>
</html>