05Js面试题-防抖和节流

Offer 驾到,掘友接招!我正在参与2022春招系列活动-刷题打卡任务,点击查看活动详情

防抖和节流都是为了避免函数被多次调用导致页面调用,但它们的本质不一样,防抖是将多次执行变为最后一次执行,节流是将多次执行变为每个一段时间执行一次

防抖

防抖指在事件触发后秒内只执行一次,若在n秒内再次触发就会重新计算时间。假设在一个按钮点击事件上使用防抖机制,n=2s,那么按钮别点击后,要在2秒之后才会执行对应函数,如果在(0,2)秒这个范围内如1.5秒时又点击了按钮,那么时间会重新从0计算,到2秒之后才会执行对应函数

防抖机制又两种:

  • 第一种为延迟执行,即点击后等待n秒执行

image.png

  • 第二种为立即执行,即点击后执行,等待n秒后才能再次执行

image.png

  • 下面的函数方法为上面两种方法的合并

image.png

节流

节流就是连续触发的事件在n秒内只执行一次。假设在一个按钮点击事件上使用节流机制,n=2s,如果持续点击这个按钮,那么每隔2秒才会执行一次对象的函数

节流机制的实现方法如下:

image.png

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享