【js】互斥锁、节流阀、防抖的理解

定义：

• 互斥锁指当事件被触发后，立即执行核心代码，如果核心代码没有执行完，事件又被触发，则不进行任何处理，简单点说就是同一时间只能做一件事情。

• 节流阀指当事件被触发后，延迟 n 秒后再执行核心代码，如果在这 n 秒内事件又被触发，则不进行任何处理。

• 防抖指当事件被触发后，延迟 n 秒后再执行核心代码，如果在这 n 秒内事件又被触发，则重新计时。

作用和应用场景：

• 互斥锁：如果事件被频繁触发，互斥锁能保证核心代码在同一时间只能被执行一次 ！如：可以使用互斥锁技术实现下拉加载查看更多功能。

• 防抖：如果事件被频繁触发，防抖能保证只有最近一次触发生效！前面 N 多次的触发都会被忽略！如：可以使用防抖技术优化搜索框建议词列表展示功能。

• 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！如：可以使用节流优化鼠标跟随效果。

核心代码：

• 互斥锁：
  
  // 1. 厕所门是打开的： true(打开)  false(关闭)
  var flag = true;
  ?
  // 2. 上厕所要调用的事件函数
  function dosomething(){
      // 2.1 如果厕所门是关着的，就不上测试了
      if(!flag) return;
      // 2.2 如果厕所门是打开的
      // 2.2.1 上厕所之前先把厕所门给关上
      flag = false
      // 2.2.2 上厕所（核心代码）
      // code...
      // 2.2.3 上完厕所之后把门打开
      flag = true
  }
  防抖：
  
  // 1. 定义一个变量指向延时器
  var timer = null;
  ?
  // 2. 某事件会触发的回调函数
  function doSomething(){
      // 2.1 先删除有可能已存在的延时器
      clearTimeOUt(timer);
      // 2.2 创建新的延时器
      timer = setTimeOut(function(){
          // 2.2.1 真正要执行的核心代码或调用核心函数
          // code...
  ?
      }, 500)
  }
  节流：
  
       // 1. 厕所门是打开的： null(打开)  有对象(关闭)
    var timer = null;
       
       // 2. 上厕所要调用的事件函数
       function doSomething(){
           // 2.1 如果厕所门是关着的，就不上测试了
           if(timer) return;
           // 2.2 如果厕所门是打开的
           // 2.2.1 上厕所之前先把厕所门给关上，而这个厕所有点特殊，至少得上16毫秒以上
           timer = setTimeOut(function(){
               // 2.2.2 上厕所（核心代码）
               // code...
       
               // 2.2.3 上完厕所之后把门打开
               timer = null;
         }, 16)
       }