函数节流和去抖的用法和区别

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

函数节流

在频繁触发的情况下,需要执行的逻辑只有执行完之后,才能继续执行下一次.示例代码:

    // 函数节流例子
    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);
    };

应用场景

一般是一些高频率触发的地方,然后想要优化性能.比如监听屏幕滚动,鼠标拖拽等等.


欢迎关注微信公众号:猴哥说前端