节流和防抖的说明和实现

在各个平台搜索“节流和防抖”,各种教程已经说的很多了,但是我之前刚接触节流和防抖的时候,还是很不理解,因为有的教程是互相引用直接复制粘贴的,看完不仅不知所以然,而且更迷茫了。

其实理解之后,我们会发现节流和防抖的概念和用法是很简单的。为了避免新手小白继续踩坑,我来一个浅显的说明和简单的实现。

说明

节流:

(暂时自定义时间为3s)
第一次点击立刻触发事件,此后点击时间与上次触发事件的时间大于3s才会触发

就像纸条经过打孔机,虽然纸条一直在向前滚动(相当于一直在点击),但是打孔机是每隔3s打一个孔(相当于每3秒触发一次事件)

防抖:

(暂时自定义时间为500ms)
点击后不触发事件,等待500ms后触发,在这500ms内,如果有新的点击,则清除原先的已等待时间,从新等待500ms

就像消消乐游戏(开始就相当于点击了一次),5秒钟内不能成功进行一次消除(等待5s后触发),游戏结束(触发事件)
5秒内有成功的消除(相当于新的点击),则从成功消除的时间起再等待5s结束(相当于清除原先的等待时间,从新等待5s)

实现

怎么实现功能呢?
把点击事件和请求事件分离开
点击之后根据条件触发请求

节流:

点击后进行判断当前时间戳与初始时间戳是否大于3s
大于3s就进行请求,并且将初始时间戳改为当前时间戳
小于3s就不请求

防抖:

点击后500ms不做请求操作
500ms内如果没有点击就进行请求
如果有点击就不请求.

demo如下:





  
  
  
  Document
  



  
  
  



你可能感兴趣的:(JavaScript,前端相关)