手写JavaScript 防抖与节流

看到就头疼

已于 2022-06-15 12:03:32 修改

阅读量45

点赞数

文章标签： javascript 开发语言前端

于 2022-06-15 12:00:34 首次发布

本文链接：https://blog.csdn.net/weixin_42292128/article/details/125294604

版权

JavaScript 防抖节流性能优化事件监听

关键词由CSDN通过智能技术生成

防抖


<body>

    <!-- 防抖 场景:搜索框实时查询 当输入完成后1秒发起请求-->

    <h2>防抖</h2>

    <input placeholder="请输入内容" />

    <script>

      let telinput = document.querySelector("input")

      telinput.addEventListener("input", debounce(dome, 1000))

      //   封装一个防抖函数

      function debounce(fn, delay) {

        let timer = null

        return () => {

          if (timer) {

            clearTimeout(timer)

          }

          timer = setTimeout(fn, delay)

        }

      }

      //   监听input事件

      function dome() {

        console.log("发起请求")

      }

    </script>

  </body>

节流


<body>

    <!-- 节流 场景:连续点击按钮一秒只发送一次请求-->

    <h2>节流</h2>

    <button>点击发请求</button>

    <script>

      let btn = document.querySelector("button")

      btn.addEventListener("click", throttle(dome, 1000))

      //   封装一个节流函数

      function throttle(fn, delay) {

        let timer = null

        return () => {

          if (timer) {

            return

          }

          timer = setTimeout(() => {

            fn()

            timer = null

          }, delay)

        }

      }

      //   监听click事件

      function dome() {

        console.log("发起请求")

      }

    </script>

  </body>