防抖:规定在多久时间内没有动做触发函数才执行该函数。less
场景举例:用户滚轮滑动显示距离页顶的高度。 //显示页顶高度 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) } } }