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

js防抖节流功能

时间:2023-03-26 22:26:58 JavaScript

防抖功能可以使用防抖debounce等优化方式减少http请求;这里有一个滚动条事件的例子:在onscroll结束时触发一次防抖功能,执行functiondebounce(fun,wait){lettimeoutreturnfunction(){letcontent=thisletargs=argumentsif(timeout){clearTimeout(timeout)}timeout=setTimeout(()=>{fun.apply(content,args)},wait)}}window.onscroll=debounce(function(){console.log('I会执行一次')},5000)节流函数只允许一个函数在N秒内执行一次。滚动条调用接口时,可以使用throttle等优化方式,减少http请求;functionthrottle(fn,delay){让prevTime=Date.now();returnfunction(){让curTime=Date.now();if(curTime-prevTime>delay){fn.apply(this,arguments);prevTime=curTime;}};}//使用varthrottleScroll=throttle(function(){console.log('我会执行一次')},1000);window.onscroll=throttleScroll;