阅读 1412

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

我们都知道频繁触发执行一段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;
},复制代码

写在最后的总结

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

Cayley 一个不断努力学习的女程序员

关注下面的标签,发现更多相似文章
评论