解释一下,我认为的函数节流:
多次触发事件,但是在一个规定时间内,该事件只会执行一次
具体例子,我第一次触发事件,开始计时,在后续的多次事件触发中,某次触发的时间距离我开始计时的时间,他们的时间间隔达到了规定的时间段,这是我们就会执行一次该事件,并把该事件的执行时间作为新的开始计时,以此循环,保证在一段时间内,只有一次执行,大大降低了函数的执行频率.这就是函数节流
常见的场景:我们下滑页面,在下滑到一定程度时,会出现返回顶部按钮,正常情况下,我们每下滑一下,都会是返回顶部事件多次计算当前距离,而当我们用函数节流后,在一段事件内只会触发一次,降低了事件的触发频率,达到了性能优化
编写思路就是利用闭包可以长时间保存某个变量,并且在外部可以访问
function throlle(callback,delay){ let startTime=0; return function (){ //使用new Date().getTime(),这样首次操作一定会执行 let endTime=new Date().getTime(); //第一次减法一定大雨delay,确保首次操作一定会执行 if(endTime-startTime>delay){ callback.apply(this,arguments) startTime=new Date().getTime(); } } } document.getElementById('box').addEventListener('click',throlle(()=>{ console.log(11); },1000))