手撕防抖和节流

防抖和节流

防抖：在n秒后重复执行该事件，如果n秒内重复执行，则重新计算

<!-- html -->
<input type="text" class="ipt" /> 

// 防抖：比如输入框事件，输入1秒后执行该事件
let input=document.querySelector(".ipt");  //首先，先获取到input输入框
let time=null; //默认定时器为空
input.oninput=function(e){ //绑定一个input事件
if(time){ //判断如果在输入的过程中还在计时  
  clearTimeout(time);//就把定时器清除 停止
  time=null //滞空
}
  time=setTimeout(()=>{ //定时器
    //consloe.log(e.target.value);//输入框输入的值
    console.log(this.value);//输入框输入的值 这时候的this指向input
  },1000); //1秒 后执行
}

节流：在n秒内只执行一次，如果在n秒内重复触发，只有一次生效

.box{
 height:520px;
 background:pink;
 overflow:scroll;
}
p{
 heigth:100px;
}

<div class="box"> 
  <p>1</p>  <!-- 放若干个屁 -->
  <p>2</p>
  <p>3</p>
</div>

//节流：比如滚动页面切换随机背景颜色
let box=document.querySelector(".box"); //先获取到box
let time=null;//默认定时器为空
box.onscroll=function(){  //滚动事件
   if(time){ //如果滚动的时候还在计时 就停止
     return
   }
  //Math.random()随机数  toString(16)简单理解就是转换为十六进制的字母和数字
  let color='#'+Math.random().toString(16).slice(2,8);
time=setTimeout((e)=>{
  this.style.background=color  //将随机背景颜色赋值给box的背景颜色
  time=null  //赋完值再吧定时器恢复null
},1000)
}

相同点：都可以通过setTimeout实现，节省计算资源