节流和防抖

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

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出去，不执行。

节流/防抖
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容