防抖和节流

参考:2分钟彻底掌握JS防抖和节流,前端面试必备知识!_哔哩哔哩_bilibili

参考视频为学习过程中比较清晰的一个老师,时长较短,建议观看视频

一 防抖(回城)

概念:防抖时,操作不执行,不操作了执行。

场景类比:一直玩手机,手机不息屏,不玩时才息屏。  

使用场景:连续点击 或 输入框查询,防止重复触发。

代码:防抖时,每次操作先清除定时器,再开启定时器。如果连续操作,就会清除掉定时器,使定时器没有办法完成,只有不操作,定时器才完成。

代码解释:

① 接收一个回调函数,返回一个回调函数

② 定义定时器,并开启定时器

③每次执行前,清除定时器

④传入对应参数,改变this指向

二 节流(技能)

概念:节流时,到了时间就必须执行一次

场景类比:等公交

使用场景:鼠标移动事件,页面滚动事件

代码:

代码解说:

① 接受一个回调函数,返回一个回调函数

②定义一个厨师时间,每次执行的时候获取一下当前的时间,用当前的时间减去初始时间,如果大于执行时间,就执行对应方法。

③给现在的时间赋值给初始时间

④改变this,传入参数

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值