当前位置: 首页 > Web前端 > HTML

JS实现节流和防抖节流(二)

时间:2023-04-02 12:32:42 HTML

前言在《JS实现节流和防抖之防抖(一)》中,我们明白了为什么要限制事件的频繁触发,以及如何做:debounce防抖节流节流原理:在一个内一定时间,触发时间会持续,事件只会在设定的时间内触发一次。深入理解:开闸放水。我要你在1秒内只流多少水,直到下一个循环你才能流出更多的水。使用时间戳在触发事件时,我们取出当前时间戳,然后减去之前的时间戳(初始值设置为0),如果大于设置的时间段,则执行函数,然后将时间戳更新为current时间戳小于则不执行。//时间戳functionthrottle(func,wait){varcontext,args;变种老=0;returnfunction(){varnow=+newDate();上下文=这个;args=参数;if(now-old>wait){func.apply(context,args);旧=现在;}}}使用定时器当一个事件被触发时,我们设置一个定时器,当事件再次被触发时,如果定时器存在,则直到定时器执行完毕,再执行函数清除定时器,以便可以设置下一个定时器。//定时器函数throttle(func,wait){varcontext,args;可变计时器;返回函数(){上下文=这个;args=参数;if(!timer){timer=setTimeout(function(){timeout=null;func.apply(context,args)},wait)}}}推荐阅读JS实现节流防抖防抖(1)