一、函数防抖
    （1）一定事件段内，只执行一次函数。
    （2）间隔时间段内触发该事件，重新开始计时（创造新的Timeout）。

    1. function debonce (fn){
    2.     let timer = null;
    3.   return function(){
    4.       clearTimeout(timer);
    5.     timer = setTimeout(fn,3000)
    6.   }
    7. }
    9. function eventHandler (){
    10.     console.log('click')
    11. }
    13. function bindEvent (){
    14.     let theDom = document.querySelector('#ua93bef8c'),
    15.       debouncedCallback = debonce(eventHandler);
    16.   theDom.onclick = debouncedCallback; 
    17.   //绑定原生点击事件 onclick 不是驼峰命名
    18. }
    19. bindEvent()

    封装防抖函数
    （1）第一次是否立即执行回调函数（比如提交数据时第一次不延迟）
    （2）间隔时间
    （3）加上清楚防抖的功能

    1. function eventHandler (){
    2.     console.log('click')
    3. }
    5. function bindEvent (){
    6.     let theDom = document.querySelector('#ua93bef8c'),
    7.       debouncedCallback = debonce(eventHandler, 4000, true);
    8.   theDom.onclick = debouncedCallback; 
    9.   //绑定原生点击事件 onclick 不是驼峰命名
    10. }
    11. bindEvent()
    13. function debonce(fn,time,triggerImmediately){
    14.     let timer = null;
    15.   let debounce = function(){
    16.         if(timer){
    17.         clearTimeout(timer)
    18.       }
    20.         let args = [...arguments],
    21.           _self = this;
    23.       //先判断是否立即触发函数
    24.       if(triggerImmediately){
    25.                 let excute = !timer;
    27.         timer = setTimeout(()=>{
    28.           timer = null
    29.         },time)
    31.         if(excute){
    32.           fn.apply(_self, args)
    33.         }
    34.       }else{
    35.         timer = setTimeout(()=>{
    36.             fn.apply(_self, args)
    37.         }, time)
    38.       }
    39.   }
    41.   debounce.remove = ()=>{
    42.       clearTimeout(timer)
    43.     timer = null
    44.   }
    45. }

    三、节流
    一段间隔时间内，只执行一次事件

    1. function throttle (fn,waitingTime){
    2.     let prevTime = new Date().getTime(),
    3.       timer = null;
    4.   return function(){
    5.     if(timer) clearTimeout(timer)
    6.       let currentTime = new Date().getTime(),
    7.         _self = this,
    8.         args = [...arguments];
    9.     if( (currentTime - prevTime) >= waitingTime){
    10.             fn.apply(_self, args)
    11.           prevTime = currentTime
    12.     }else{
    13.         timer = setTimeout(function(){ fn.apply(_self, args) },waitingTime)
    14.     }
    15.   }
    16. }

    四、防抖与节流的区别
    防抖：n秒内，无论怎么触发事件，都不执行。
    节流：n秒内，无论怎么触发事件，只执行一次。
    应用场景：
    看具体需求
    （1）输入查询，间隔时间发送请求 => 节流
    （2）数据请求按钮点击 => 防抖，节流都行。 防抖，n秒内只执行一次。 节流，n秒内，不管怎么点，只执行一次。