防抖和节流：均是减少某一函数频繁执行消耗内存和资源的情况(减少执行次数)。
防抖：规定在多久时间内没有动作触发函数才执行该函数。
场景举例：用户滚轮滑动显示距离页顶的高度。
//显示页顶高度
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);
2.节流：类型于技能冷却，触发后一定时间不再触发
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)
}
}
}
|
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
淘帖
顶
踩
