js防抖原理和案例

<script>
    //原理 可以用于输入自行搜索
    const button = document.querySelector('input')
    function paymoney() {
      console.log('hahah')
      console.log(this) //当单独执行它的时候它指向是button对象 但是在闭包里的settimeout后它的指向是window
      //所以必须在调用这个函数的函数里绑定this
    }
    function debounce(func, delay) {
      let timer
      return function () {
        //如果不这样写的话（return），还没点击就会执行func（），这是高阶函数的写法
        let content = this
        let arg = arguments //为了给函数设置参数 用argument可以获取当前！！函数！！（重点）传入的参数 不用形参是因为你不知道有多少个参数
        if (timer) {
          clearTimeout(timer)
        }

        timer = setTimeout(() => {
          //为清楚延时时设置名字
          func.apply(content, arguments) //改用箭头函数就可以直接用arguments（箭头函数知识自行补充）如果用匿名函数则是arg
          console.log(content)
        }, delay)
      }
    }
    button.addEventListener('click', debounce(paymoney, 1000))
  </script>```
<script>
  //案例 第一次就执行（可以用于登录按钮 上传按钮等等）
  const button = document.querySelector('input')
  function submit(e) {
    console.log(1)
  }
  function debounce(fn, timer, triggleNow) {
    var t = null
    return function () {
      var firstClick = !t
      if (t) {
        clearTimeout(t)
      }

      if (firstClick) {
        fn.apply(this, arrguments)
      }
      t = setTimeout(() => {
        t = null
      }, timer)
    }
  }
</script>