防抖和节流

防抖（debounce）

原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计算时间。（最后一次优先）

例子：如果有人进电梯，那电梯将在10秒钟后出发，这时如果又有人进电梯了，我们又得等10秒再出发。

思路：通过闭包维护一个变量，此变量代表是否已经开始计时，如果已经开始计时则清空之前的计时器，重新开始计时。

funtion debounce( fn, time ) {
    // 使用闭包来保存变量
   let timeout;
   return function() {
        if(!timeout) {
            // 如果持续存在，就清掉前面的定时器。
            clearTimeOut(timeout);
            return;
        } 
        timeout = setTimeout(fn, time)
   }   
}    

// 处理函数
function handle() {
  console.log(123)  
}

//添加监听事件
window.addEventListener('reseize', debounce(handle, 500));        

　　

节流（throttle）

原理：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。（一次优先）

例子：游戏内的技能冷却，无论你按多少次，技能只能在冷却好了之后才能再次触发

思路：通过闭包维护一个变量，此变量代表是否允许执行函数，如果允许则执行函数并且把该变量修改为不允许，并使用定时器在规定时间后恢复该变量。

function throttle ( fn, time ) {
    var timer = null;
    return function() {
         var _this = this;
         var args = arguments;
         if(!timer) {
            timer = setTimeout(function () {
                fn.apply(_this, args);   
                timer = null;
            }, time)
        }    
    }  
}    

　　

函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。
使用场景

debounce
1.search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。

throttle
1.鼠标不断点击触发，mousedown(单位时间内只触发一次)。
2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。