一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    简单的防抖和节流的例子

    技术 368 2022-09-05 10:49

    先说说我理解的防抖和节流

    1.防抖:

    在某一段时间内,某个事情只能做一次

    比如浏览器的滚动触发事件:

    正常滚动的时候 触发的频率是很高的

    但是我们只想触发最后那一下 该如何解决呢?

    基于上述场景,首先提出第一种思路:在第一次触发事件时,不立即执行函数,而是给出一个期限值比如200ms,然后:

    • 如果在200ms内没有再次触发滚动事件,那么就执行函数
    • 如果在200ms内再次触发滚动事件,那么当前的计时取消,重新开始计时

    效果:如果短时间内大量触发同一事件,只会执行一次函数。

    实现:既然前面都提到了计时,那实现的关键就在于setTimeout这个函数,由于还需要一个变量来保存计时

    let timer = null
          if (timer) clearTimeout(timer);
          timer = setTimeout(() => {
            console.log("do someting");
          }, 200);
    

    很简单的几行代码,就实现了防抖

    如果用我们玩游戏的时候 技能释放来理解,防抖就是现在服务器很卡很卡 我们一直按技能 没有显示cd倒计时!也没有释放技能

    等过了一会 服务器缓过来了,技能释放出来了。。cd倒计时也开始了。。200ms就是我们的服务器延迟。。。


    2,节流

    同样的,也是某个时间呢,某个事情只能做一次

    节流跟防抖的不同区别就是:

    还是拿游戏技能来形容,就是我们释放技能的cd倒计时,是不过节流是服务器无延迟的情况下

    当时释放了某个技能之后,在cd结束之前,是无法再释放该技能的!

    代码实现的话 其实比防抖多加了一个标实!

    let timer = null;
    let valid = true;
      if (valid) {
            valid = false;
            console.log(event);
          }
          if (timer) clearTimeout(timer);
          timer = setTimeout(() => {
            valid = true;
            console.log("重置了 解锁了 可以继续调用");
          }, 2000);
    


    下课!

    文章评论

    评论列表(0