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

JS实现功能节流和防抖

时间:2023-04-05 18:51:32 HTML5

1。函数节流当事件不断触发时,保证事件处理函数在一定时间内只被调用一次。即函数执行一次后,只有执行周期大于设定的才会执行第二次。记忆法:与水流的流速有关,我要你1秒内只流多少水,多余的水流只能在下一个循环流出。应用场景:如果用户一直滑动滚轮,规定1秒只能滑动一次。滑多了也没用,下一个循环再滑的时候才有用。实现原理:A:利用函数的闭包锁定上次执行时间。与本次的执行时间相比,如果大于设置的间隔,则执行B:也可以直接将lasTime放到global中,不需要Closures,但是这样不好。监听事件时传递参数delay只能这样写,避免this丢失:1.throttle函数是全局执行的,内部this通常指向window,然后返回一个匿名函数。2、返回的匿名函数与事件绑定,this指向被监控的元素(文档)。特殊处理4这里用apply修正this指向,让fn里面的this指向回document2.函数防抖当事件连续触发时,如果事件在一定时间内没有再次触发,事件处理函数只会执行一次。如果事件在设定的时间到来之前再次触发,则延时重新开始,比如一个频繁触发的函数,防抖只能让最后一次执行的记忆方法:函数执行者冷静下来之后(没有全部抖动之后)时间),它实际上被执行了。应用场景:用户多次点击提交表单不关闭结构会很简单但是为了不污染wholeworld,并且如果有一定的封装建议,用一个闭包来包裹它functiondebounce(func,time){lettimer;returnfunction(...arg){//注意这是上次缓存的老定时器clearTimeout(timer);timer=setTimeout(()=>{console.log('asd')func.apply(this,arg);},time);};}debounceButton.addEventListener("点击",debounce(doSomething,1000));函数doSomething(e){控制台。日志(123);安慰。日志(这个);安慰。日志(e);}