防抖和节流知识及运用

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。

此时我们可以使用debounce(防抖) 和 throttle (节流) 的方式减少调用频率，同时又不影响实际效果。

函数防抖：函数防抖(debounce):当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的事件到来之前，又一次触发了事件，就重新开始延时。

   - 如下，持续触发scroll事件时，并不执行handle函数，当 1 秒内没有触发scroll事件时，才会延时触发scroll事件。
    
function debounce(fn, wait) { 
  var timeout = null;
  return function() {
     if(timeout !== null)clearTimeout(timeout); 
    timeout = setTimeout(fn, wait);
   } 
  } // 处理函数
  function handle() {
    console.log(Math.random());
  }
  // 滚动事件 window.addEventListener('scroll', debounce(handle, 1000));

函数节流(throttle)：当持续触发事件时，保障一定时间段内只调用一次事件处理函数。

  -如下，持续触发scrllo事件时，并不会立即执行handle函数，每隔 1 秒才会执行一次handlie函数。
  
  var throttle =function(func, delay) {
    var prev = Date.now(); 
    return function() { 
    var context = this;
    var args = arguments; 
    var now = Date.now(); 
      if (now - prev >= delay) {
        func.apply(context, args); 
        prev = Date.now(); 
      } 
    }
  }
  function handle() {
   console.log(Math.random());
  }
  window.addEventListener('scroll', throttle(handle,1000));

总结：
函数防抖：

将几次操作合并为一次操作进行。原理是维护一个定时器，规定在延时时间后触发函数，但是在延时时间内再触发的话，就会取消之前的计时器重新设置。只有最后一次触发才会被触发。

函数节流：

使的一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

区别：
函数节流不管事件触发有多频繁，都会保障在一定时间内执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。