js高级之节流的两种方法

最新推荐文章于 2024-07-20 14:49:34 发布

JQ...

最新推荐文章于 2024-07-20 14:49:34 发布

阅读量636

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_42201272/article/details/105347839

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <button class="btn">按钮</button>
  <button class="btn2">按钮</button>
  <body>
    <script>
      // 节流就是规定一定时间内进行一个处理事件 同防抖类似
      // 定时器写法
      var btn = document.querySelector('.btn')
      var btn2 = document.querySelector('.btn2')
      btn.onclick = throttle_timeout(function (e) {
        console.log(this, e)
      })
      function throttle_timeout(callback) {
        var flag = true
        return function () {
          if (flag) {
            flag = false
            setTimeout(() => {
              callback && callback.call(this, ...arguments)
              flag = true
            }, 1000)
          }
        }
      }
      btn2.onclick = throttle(function (e) {
        console.log(this, e)
      })
      function throttle(callback, t = 1000) {
        var startTime = 0
        return function () {
          endTime = +new Date() // 点击当前的时间
          if (endTime - startTime > t) {
            //当前点击的时间减去上次点击的时间判断是否大于规定的时间
            startTime = endTime //将上次点击的时间给到开始点击的时间
            callback && callback.call(this, ...arguments)
          }
        }
      }
    </script>
  </body>
</html>