函数防抖和函数节流

最新推荐文章于 2022-07-19 22:51:51 发布

xunmi_star

最新推荐文章于 2022-07-19 22:51:51 发布

阅读量110

点赞数

分类专栏：前端实际项目开发中的常用方法文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_42786958/article/details/117930161

版权

前端实际项目开发中的常用方法专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

网上关于防抖节流的文章很多，其中不乏有各位大佬的各种姿势的深入理解，需要自己有一定的基础方可学得轻松一些。对于初次接触或迫切需要此功能的人员来说，可能一段直接复制即可使用的代码就能满足其初体验, 用的多了再看下大佬的文章自然也就懂了。

正文

一.函数节流

思路整理：给一个事件锁 =》关闭锁 =》事件结束后解开锁

平时可能日用而不知，实际的实现过程就这三步，

<body>
    <input type="text" id="dev" />


    <script>
      let dev = document.querySelector('#dev')
      dev.addEventListener('keyup', function () {
        throttle();
      })

      let throttle_lock = true;    //事件锁
      function throttle() {
        if (throttle_lock) {        
          throttle_lock = false;    //进入事件立马关闭throttle_lock 
          setTimeout(() => {
            console.log('执行事件1')   //我一般在这里放需要防止重复提交的接口请求

            throttle_lock = true;    //定时器任务执行完毕后解开throttle_lock 
          }, 2000)
        }
      }
    </script>
</body>

一顿输入，浏览器控制台显示的输出次数和setTimeout设置的时间可以对上，就说明事件节流成功了（2s内只执行一次事件）

一.函数防抖

思路整理：给一个空定时器 =》清除它 =》创建它后再执行事件

<body>
    <input type="text" id="dev" />


    <script>
      let dev = document.querySelector('#dev')
      dev.addEventListener('keyup', function () {
        debounce();
      })

      let timer = null;        //空的定时器
      function debounce() {
        if (timer) {
          clearTimeout(timer);  //触发事件立马清除定时器
        }
        timer = setTimeout(() => {    //创建一个定时器，

          console.log('执行事件2');    //这里可以放实时搜索这类的请求
        }, 2000)
      }
    </script>
</body>

2s内不管触发多少次，都以最后一次触发为准开始记时

个人总结：
共通点：都是为防止某个事件短时间内触发的频率过高

节流：可以这么理解，一把加特林机枪只有一发子弹，而且2s后队友才会给你新的弹夹，你2s内手速在快也只能造成一发子弹的伤害

防抖：一个技能的读条时间需2s，再次点击会中断施法并重新开始读条