函数防抖，函数节流

   函数节流：

不一定使用定时器，只要有时间差就可以(如下：通过当前时间Datet.now（）

   在函数频繁触发时

    函数执行一次后，只有大于设定执行周期后，才会执行第二次

    适合多次事件按时间做平均分配触发

 

    应用：

    窗口调用  resize事件

    页面滚动 scroll事件

    dom元素的拖拽  mousemove

    案例：  抢票的疯狂点击 mousedown

 

使用2个button按钮

 <button id="throttle">函数节流</button>
    <button id="debounce">函数防抖</button>

封装之后的代码：

// 节流的函数
    function throttle(callback,time){
      let start = 0
      // 保证第一次事件必然调用回调
      return function(...args){
        console.log(args)
        const current = Date.now()
        // 当前时间
        if(current-start>time){
          // 将当前时间与初始时间进行作差，与
          // 准备调用之前，当前保存到start
          start = current
          callback.apply(this,args)
        }
      }
    }
    function handleClick(event){
      console.log('处理点击事件')
      console.log(args)
    }
    document.getElementById('throttle').onclick = throttle(handleClick,2000)

函数防抖

在规定时间内，只让最后一次生效，前面不生效，适合多次事件响应一次情况

      场景：

      实时搜索   keyup

      文本框输入验证，即ajax请求   连续输入文字后发生ajax请求进行验证，验证一次就可以了

封装：

  function debounce(callback,time){
      return function (...args){
        console.log('debounce事件')
        if(callback.timeId){
         
          clearTimeout(callback,timeId)
        }
        callback.timeId = setTimeout(()=>{
          console.log(args)
          delete callback.timeId
          // 删除保存的定时器id 标识
          callback.apply(this,args)
          //延迟调用
        },time)
      }
    }
    function handleClick(event){
      console.log('处理点击事件')
      console.log(args)
    }
    document.getElementById('debounce').onclick = debounce(handleClick,200)