js 防抖和节流

前言：

突然被人问到节流和防抖的区别，一脸大写的懵逼，一直以为他俩是一个东西。那赶紧学习一下吧。

防抖函数：

定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。
原理：对事件处理函数做延时执行，如果在设置的时间内再次触发事件函数，清除定时器（clearTimeout），重新计时。
适用场景：一个输入框连续输入，获取用户最终输入结果
实现：

function debounce(fn, ms)  {
  let timer = null;
  return function() {
    //在ms时间内再次输入计时器清除，重新计时
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, ms);
  }
}
  
function changeFn(e) {
    console.log(`用户输入变化了:time=${new Date()}------${e.target.value}`);
}
  
document.getElementById('ip').addEventListener('keyup', debounce(changeFn, 300), false);

节流函数

定义：对于频繁触发的事件只有在指定时间间隔后执行一次
原理：设置一个flag，否—直接return不执行事件处理函数，是—立即设置flag为否，延时执行事件处理函数，同时这是flag为是
适用场景：滚轮滚动、视口大小改变，实时根据变化计算值，根据这个值改变页面显示。
实现：

function throttle(fn, ms){
   let canRun = true;
   return function() {
     if(!canRun){return}
     //立即设置flag为false，保证ms时间内会return，不执行函数
     canRun = false;
     setTimeout(() => {
       fn.apply(this, arguments);
       //延时ms时间后设置flag为true，保证ms时间后会执行函数
       canRun = true;
     }, ms)
   }
 }

function resized(e) {
   console.log(`视口变化了${e.target.innerWidth}`);
 }

window.addEventListener('resize', throttle(resized, 300), false);

总结

防抖是在指定时间内没有触发操作，才会去执行函数
节流是每隔指定时间后执行一次函数