JS 函数防抖和函数节流

Posted 2020-09-23

我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响，尤其是在做一些效果实现方面，或者逻辑中需要进行后端请求，更是会导致卡顿，效果失效等结果，所以在处理类似的情况时，可以考虑使用函数节流和函数去抖来解决，至于具体使用哪一种方式，根据实际情况分析定夺,先来讲解一些这两者的概念

函数节流：在频繁触发的情况下，需要执行的逻辑只有执行完之后，才能继续执行下一次

函数防抖：在频繁触发的情况下，只有足够的空闲时间，才执行代码一次，如果没有执行完就清除掉，重新执行逻辑

应用场景：高频触发以下方法

• 页面滚动监听（onscroll）
• 窗口resize事件，等到窗口变化结束后才进行业务逻辑的运行
• 鼠标键盘 mousedown/keydown 事件
• 鼠标的进入移出事件（mouseenter/mouseleave）
• DOM 元素的拖拽功能实现（mousemove）
• 输入框搜索等（keyup）

函数节流和函数防抖两个概念是有很大区别的，我们用一段代码示例来看看其究竟

// 函数节流例子
var can = true;
window.onscroll = function(){
  if(!can){
   //判断上次逻辑是否执行完毕，如果在执行中，则直接return
   return;
  }
  can = false;
  setTimeout(function(){
    //执行逻辑
    can = true;
  }, 100);
};

可以看出上一次的逻辑必须执行完毕之后，才会执行下一次的逻辑，如果我们不做函数节流，因为滚动是一个频繁的操作，会被时时刻刻监听到，执行多次逻辑的触发，做了节流会在一定程度上控制逻辑的触发

// 函数防抖
var timer = null;
window.onscroll = function(){
    if (timer) {
      // 清除未执行的逻辑，重新执行下一次逻辑，不论上一次是否执行完毕
      clearTimeout(timer); 
    }
    timer = setTimeout(function(){
        //执行逻辑
    }, 300);
};

在函数防抖这个例子中，可以看出当事件被监控触发时候，不论上一次的逻辑有没有执行完毕，都要清除掉重新执行，函数防抖会更加降低事件被触发的频率。

真实使用案例讲解：在一个列表页面，当鼠标进入到列表中某一项时显示一段tip提示语（提示语的内容需要请求接口获得），移出时隐藏提示语框。（提示语是当前列表项的相关内容）

图示：这样一整个列表，当我们鼠标放到订正情况上时候需要显示订正情况的详细信息，而有时我们鼠标滑过的时候可能把每一条的逻辑都触发，但是这并不是我们想要的，我们只想最后鼠标留在哪条数据上，才显示哪一段数据的逻辑，所以根据情况的分析，我们这种情况适用的是 函数去抖

代码：

<!--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>
var event = null,
toggleItem:function (state,item) {
    if (state==true) {
        if (event) {
            clearTimeout(event);
        }
        event =setTimeout(function () {
            //执行item的请求显示内容逻辑
        },100);
    }
    item.isVisible = state;
},

写在最后的总结

所以最重要的事情就是要首先清楚地区分二者的概念，理解实现的方法，再根据具体的需求来判断适用哪一种方法来进行优化，二者在功能实现上是有本质区别的。