JavaScript 中函数节流和函数去抖的讲解

   <p>我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响，尤其是在做一些效果实现方面，或者逻辑中需要进行后端请求，更是会导致卡顿，效果失效等结果，所以在处理类似的情况时，可以考虑使用函数节流和函数去抖来解决，至于具体使用哪一种方式，根据实际情况分析定夺,先来讲解一些这两者的概念</p>    <p>函数节流：在频繁触发的情况下，需要执行的逻辑只有执行完之后，才能继续执行下一次</p>    <p>函数防抖：在频繁触发的情况下，只有足够的空闲时间，才执行代码一次，如果没有执行完就清除掉，重新执行逻辑</p>    <p>应用场景：高频触发以下方法</p>    <ul>     <li>页面滚动监听（onscroll）</li>     <li>窗口resize事件，等到窗口变化结束后才进行业务逻辑的运行</li>     <li>鼠标键盘 mousedown/keydown 事件</li>     <li>鼠标的进入移出事件（mouseenter/mouseleave）</li>     <li>DOM 元素的拖拽功能实现（mousemove）</li>     <li>输入框搜索等（keyup）</li>    </ul>    <p>函数节流和函数防抖两个概念是有很大区别的，我们用一段代码示例来看看其究竟</p>    <pre>  <code class="language-javascript">// 函数节流例子  var can = true;  window.onscroll = function(){    if(!can){     //判断上次逻辑是否执行完毕，如果在执行中，则直接return     return;    }    can = false;    setTimeout(function(){      //执行逻辑      can = true;    }, 100);  };</code></pre>    <p>可以看出上一次的逻辑必须执行完毕之后，才会执行下一次的逻辑，如果我们不做函数节流，因为滚动是一个频繁的操作，会被时时刻刻监听到，执行多次逻辑的触发，做了节流会在一定程度上控制逻辑的触发</p>    <pre>  <code class="language-javascript">// 函数防抖  var timer = null;  window.onscroll = function(){      if (timer) {        // 清除未执行的逻辑，重新执行下一次逻辑，不论上一次是否执行完毕        clearTimeout(timer);       }      timer = setTimeout(function(){          //执行逻辑      }, 300);  };</code></pre>    <p>在函数防抖这个例子中，可以看出当事件被监控触发时候，不论上一次的逻辑有没有执行完毕，都要清除掉重新执行，函数防抖会更加降低事件被触发的频率。</p>    <p>真实使用案例讲解：在一个列表页面，当鼠标进入到列表中某一项时显示一段tip提示语（提示语的内容需要请求接口获得），移出时隐藏提示语框。（提示语是当前列表项的相关内容）</p>    <p>图示：这样一整个列表，当我们鼠标放到订正情况上时候需要显示订正情况的详细信息，而有时我们鼠标滑过的时候可能把每一条的逻辑都触发，但是这并不是我们想要的，我们只想最后鼠标留在哪条数据上，才显示哪一段数据的逻辑，所以根据情况的分析，我们这种情况适用的是 <strong>函数去抖</strong></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/90c9d4800cf59968527a2348e90fc577.png"></p>    <p>实现效果图</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c1d23f6afe20db938ec8938b36fb5f7a.png"></p>    <p>代码书写</p>    <pre>  <code class="language-javascript"><!--html 一段mvvm框架的dom书写-->  <td  ms-mouseenter="toggleItem(true，item)" ms-mouseleave="toggleItem(false,item)">      <span>{{item.info}}</span>      <div ms-class="show:item.isVisible">          <p>item需要显示的内容</p>       </div>  </td></code></pre>    <pre>  <code class="language-javascript">var event = null,  toggleItem:function (state,item) {      if (state==true) {          if (event) {              clearTimeout(event);          }          event =setTimeout(function () {              //执行item的请求显示内容逻辑          },100);      }      item.isVisible = state;  },</code></pre>    <p>写在最后的总结</p>    <p>所以最重要的事情就是要首先清楚地区分二者的概念，理解实现的方法，再根据具体的需求来判断适用哪一种方法来进行优化，二者在功能实现上是有本质区别的。</p>    <p>Cayley 一个不断努力学习的女程序员</p>    <p> </p>    <p>来自：https://juejin.im/post/58f46e8944d904006c026952</p>    <p> </p>