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

　　我们都知道频繁触发执行一段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);
};

应用场景

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

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

相关推荐