手写节流函数-基本实现

  <button class="btn">按钮</button>
  <!-- <script src="./js/underscore.js"></script> -->
  <script>
    function hdcthrottle(fn,time){
      //获取开始时间
      let startTime = 0
      const _throttleFn= function(){
        //每次点击获取点击的时间
       const nowTime = new Date().getTime()
      //  等待的时间 = 间隔时间 -(每次点击的时间-开始时间)
       let waitTime = time - (nowTime - startTime)
        if(waitTime <= 0 ){
          fn.apply(this)
          // 让开始时间等于下次执行点击的时间
          startTime = nowTime
        }
      }
      return _throttleFn
    }
  </script>
  <script>
    const btnEl = document.querySelector(".btn")
    let index = 1
    btnEl.onclick =hdcthrottle(function(){
      console.log(`第${index++}次执行`,this.value)
    },1000)
  </script>
posted @ 2024-10-22 19:42  韩德才  阅读(2)  评论(0编辑  收藏  举报