节流和防抖

防抖,就是短时间调用多次,只指定最后一次。
防抖的实现思路?答,利用定时器。
记忆思路:从新开始。

let timerId = null;
document.querySelector('#ipt').onkeyup=function(){
  //防抖
  if(timerId !==null){
    clearTimeout(timerId)
  }
  timerId = setTimeout(()=>{
    console.log('防抖输出')
  },1000)
}

在上述代码中,首次进来,不执行清楚,执行定时器。
如果定时器没到时间,又进来方法,则清除定时器,console不会输出。
累加此结果,直到不会清除定时器,也就执行最后一次调用。

节流,指连续触发事件,但是在设定的一段时间内只执行一次的函数。1秒内触发多次,只在1秒后执行一次。
记忆思路:不要打断我。

let timerId = null
document.querySelector('#ipt').onmouseover = function(){
  if(timerId !==null){
    return; //如果有个定时器正在执行,直接return出去
  }
  timerId = setTimeout(()=>{
    console.log('节流函数')
    timerId = null //这里null了之后又可以等下次执行 
  },100)
}

在短时间内,多次执行会return出去,不执行。

节流/防抖

你可能感兴趣的:(节流和防抖)