经常可能会用到的【函数节流和函数防抖】记录下，做下区分

今天突然被人问到，函数节流和函数防抖的区别是什么，
结果我脑子一热直接举了个滚动条的粟子说是优化高频率执行的手段，就记得自己是用setTimeout来实现的。
完了区别是什么？？哪个是哪个都蒙B了
回家想想，有些东西只有当自己要用到的时候，结合当前的需求才能真正想到要怎么做，
其实还是自己缺少总结，把原理理解成一种常态会更深刻

 

一、概念解释

 函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。
 大家大概都知道旧款电视机的工作原理，就是一行行得扫描出色彩到屏幕上，然后组成一张张图片。由于肉眼只能分辨出一定频率的变化，当高频率的扫描，人类是感觉不出来的。反而形成一种视觉效果，就是一张图。就像高速旋转的风扇，你看不到扇叶，只看到了一个圆一样。
 同理，可以类推到js代码。在一定时间内，代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多，带来的效果也是一样。倒不如，把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源，又能让页面浏览更加顺畅，不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。

 函数节流：是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。

// 函数节流
var flag= null;
document.getElementById("throttle").onscroll = function(){
    if(flag){
        // 判断是否已空闲，如果在执行中，则直接return
        return;
    }

    flag= true;
    setTimeout(function(){
        console.log("函数节流");
        flag = false;
    }, 300);
};

　　

 函数防抖：是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态

    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
};