共计 750 个字符,预计需要花费 2 分钟才能阅读完成。
防抖和节流:
均是缩小某一函数频繁执行耗费内存和资源的状况 (缩小执行次数)。
防抖:规定在多久工夫内没有动作触发函数才执行该函数。
场景举例:用户滚轮滑动显示间隔页顶的高度。// 显示页顶高度
function showTop(){console.log(document.body.scrollTop||document.documentElement.scrollTop)
time = null;
}
// 防抖函数
function rejectShook(){
var time = null;
return function(){if(time==null){
// 新建计时器,到时 console
time = setTimeout(showTop,200)
}else{
// 没到工夫删除老计时器, 新建另一计时器.
clearTimeout(timer);
time =setTimeout(showTop,200)
}
}
}
window.onscroll =rejectShook(showTop);
节流:类型于技能冷却,触发后肯定工夫不再触发
function showTop(){console.log(document.body.scrollTop||document.documentElement.scrollTop;);
}
window.onscroll =lessRender();
function lessRender(){
// 定义一个冷却, 初始未冷却:false
var lique =false;
return function(){
// 查问以后状态
if(lique){return;~~~~}else{show();
lique = true;
// 从新进入冷却,2s 后能够再触发
setTimeout(()=>{lique=false},2000)
}
}
}
正文完
发表至: javascript
2021-03-18