防抖和节流的概念及实现方法

引言

在用户高频率触发事件时,会使得浏览器的负担加重,可能会导致用户体验非常糟糕。这时就可以使用防抖和节流来减少事件处理函数被调用的频率。

防抖

概念:一定时间内,频繁触发事件,事件处理函数只执行最后一次。
  实现方式:定义一个全局变量存储setTimeOut的值,每调用一次事件处理函数,都先清除掉上一次设置的延时器,然后设置本次事件处理函数的setTimeOut,这样可以实现延时器规定的时间内只触发一次事件处理函数原本应该执行的功能代码。

节流

概念:一定时间内,频繁触发事件,事件处理函数只执行一次。
  实现方式:声明一个全局变量记录事件的触发时间,每一次触发事件调用事件处理函数都获取当前时间,比较当前时间和上一次触发事件的时间间隔,如果大于节流的时间,就执行功能代码,然后把当前时间赋值给全局定义的变量,当做下一次触发事件时比较的对象。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值