概念

函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。

函数节流是指一定时间内js方法只跑一次。

轮播图一直点下一张，会触发多个定时器，用一个节流器(其实就是一个flag= false)就可以保证他在上一个定时器没结束之前不会开启下一个定时器

函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。

在搜索框输入关键字搜索时，通常会弹出联想到的搜索词语，用防抖可以延时弹出联想词语的弹出，让用户把完整的词语打完后再弹出，而不是每次keyup都会触发这个事件

函数节流

// 函数节流
var canRun = true; // 节流器  
document.getElementById("throttle").onscroll = function(){
if(!canRun){
  return
}
canRun = false
setTimeout( function () {
    console.log("函数节流")
    canRun = true
  }, 500)
}

当canRun为false的时候不能开启下面的定时器

函数防抖

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

当屏幕滚动后，三秒内没有再次滚动，则会打印

如果三秒内再次滚动了，又会重新开始这个定时器，在之后的三秒后没有滚动才会打印