首页 > 其他 > 详细

函数节流仿写

时间:2020-03-29 18:42:45      阅读:54      评论:0      收藏:0      [点我收藏+]

解释一下,我认为的函数节流:

多次触发事件,但是一个规定时间内,该事件只会执行一次

具体例子,我第一次触发事件,开始计时,在后续的多次事件触发中,某次触发的时间距离我开始计时的时间,他们的时间间隔达到了规定的时间段,这是我们就会执行一次该事件,并把该事件的执行时间作为新的开始计时,以此循环,保证在一段时间内,只有一次执行,大大降低了函数的执行频率.这就是函数节流

常见的场景:我们下滑页面,在下滑到一定程度时,会出现返回顶部按钮,正常情况下,我们每下滑一下,都会是返回顶部事件多次计算当前距离,而当我们用函数节流后,在一段事件内只会触发一次,降低了事件的触发频率,达到了性能优化

 

function throlle(callback,delay){
let startTime=0;
return function (){
//使用new Date().getTime(),这样首次操作一定会执行
let endTime=new Date().getTime();
//第一次减法一定大雨delay,确保首次操作一定会执行
if(endTime-startTime>delay){
callback()
startTime=new Date().getTime();
}
}
}
document.getElementById(‘box‘).addEventListener(‘click‘,throlle(()=>{
console.log(11);
},1000))

 

函数节流仿写

原文:https://www.cnblogs.com/liuXiaoDi/p/12593482.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!