前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >简单的防抖和节流的例子

简单的防抖和节流的例子

作者头像
biaoblog.cn 个人博客
发布2022-09-28 14:54:05
2390
发布2022-09-28 14:54:05
举报

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

1.防抖:

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

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

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

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

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

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

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

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

代码语言:javascript
复制
let timer = null
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        console.log("do someting");
      }, 200);

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

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

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

2,节流

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

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

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

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

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

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

下课!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.防抖:
  • 2,节流
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档