防抖（debounce）和节流（throttle）

最新推荐文章于 2023-06-07 13:13:03 发布

Waghhhh

最新推荐文章于 2023-06-07 13:13:03 发布

阅读量112

点赞数

文章标签： javascript html5 es6

本文链接：https://blog.csdn.net/Waghhhh/article/details/120523799

版权

防抖：高频率触发事件，只取最后一次事件处理的结果

应用场景：1.input事件搜索框。2.window窗体调整大小。

实现例子：

<body>
  <input type="text">
  <script>
    const input = document.querySelector('input')
    input.oninput = debounce(function () {
      console.log(this.value);
    }, 1000)

    // 封装防抖函数
    function debounce(fn, delay) {
      let timer; //创建一个标记得到setTimeout
      return function () {
        //如果在delay时间内再次触发滚动事件，那么当前的计时取消，重新开始计时
        if (timer) {
          clearTimeout(timer) //清除掉前一个定时
        }
        //如果在delay时间内没有再次触发滚动事件，那么就执行函数
        timer = setTimeout(() => { 
          fn.call(this)// 业务代码执行地
        }, delay)
      }
    }
  </script>
</body>

节流：高频率触发事件，取第一次事件处理

应用场景：1.滚动事件。2.鼠标点击事件。

<body>
  <script>
    window.onscroll = throttle(function () {
      console.log('滚动了', this);
    }, 1000)

    function throttle(fn, delay) {
      let flag = true;//照样是创建一个标记，默认为true
      return function () {
        if (flag) {
//默认情况下执行业务函数，当第一次触发事件后，flag变为false.
//经过delay时间后，执行业务函数，才恢复flag=true.
          setTimeout(() => {
            fn.call(this)//业务函数
            flag = true
          }, delay)
        }
        flag = false
      }
    }
  </script>
</body>

Waghhhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖（debounce）和节流（throttle）

防抖：高频率触发事件，只取最后一次事件处理的结果应用场景：1.input事件搜索框。2.window窗体调整大小。实现例子：<body> <input type="text"> <script> const input = document.querySelector('input') input.oninput = debounce(function () { console.log(this.value); }
复制链接

扫一扫