防抖与节流

问题：

有时候多次点击按钮会多次触发响应时间，尤其是向后台请求数据时，多次请求更容易造成卡顿。

解决：

1. 防抖：规定时间内，以最新的触发事件为准，取消之前的事件，执行最新的事件

2. 节流：规定时间内，以第一次触发为准，之后的触发在第一次操作还存在的情况下，忽略事件触发。

具体实现：

// 防抖：
    // 规定时间内，每次触发都会取消掉之前的定时器，创建新的定时器，若规定时间内未再次触发，则规定时间之后执行函数    
// 第一参数是触发的函数，第二参数是延时时间
    function debounce(fn, wait) {
        let timeout = null;    
        return function() {        
            if(timeout !== null)   clearTimeout(timeout);        
            timeout = setTimeout(fn, wait);    
        }
    }

window.addEventListener('click', debounce(handle, 3000));

// 节流：
    // 规定时间内只执行一次，如果存在已创建的定时器就不会再创建新的定时器
// 第一参数是触发的函数，第二参数是延时时间
// 定时器版
    function throttle(func, wait) {
      let timeout;
      return function() {
        if (!timeout) {
          timeout = setTimeout(()=> {
            func();
            timeout = null;
          }, wait)
        }
      }
    }

// 时间戳版：
function throttle(func, wait) {
    let previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

function handle() {            
　　console.log("你好");        
}

window.addEventListener('click', throttle(handle, 3000));