防抖和节流

防抖（debounce）

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

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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）

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

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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来判断。