关于javascript:函数的节流throttle与防抖debounce

一、事件频繁触发可能造成的问题?

1. 一些浏览器事件:window.onresize、window.mousemove 等，触发的频率十分高，会造成浏览器性能问题
2. 如果向后盾发送申请，频繁触发，对服务器造成不必要的压力

二、如何限度事件处理函数频繁调用

1. 函数节流
2. 函数防抖

三、函数节流 (throttle)

1. 了解:

   - 在函数须要频繁触发时: 函数执行一次后，只有大于设定的执行周期后才会执行第二次
   - 适宜屡次事件按工夫做平均分配触发 

2. 场景：

   - 窗口调整（resize）- 页面滚动（scroll）- DOM 元素的拖拽性能实现（mousemove）- 抢购疯狂点击（click）

四、函数防抖 (debounce)

1. 了解:

   - 在函数须要频繁触发时: 在规定工夫内，只让最初一次失效，后面的不失效。- 适宜屡次事件一次响应的状况 

2. 场景：

   - 输入框实时搜寻联想（keyup/input）

五、封装

1. 函数节流 - 封装

     /* 
        用来返回节流函数的工具函数
    */
    function throttle(callback, delay) {let pre = 0 // 默认值不要是 Date.now() ==> 第 1 次事件立刻调用
      return function (event) { // 节流函数 / 真正的事件回调函数   this 是产生事件的标签
        const current = Date.now()
        if (current - pre > delay) { // 只有离上一次调用 callback 的时间差大于 delay
          // 调用真正处理事件的函数, this 是事件源, 参数是 event
          callback.call(this, event)
          // 记录此次调用的工夫
          pre = current
        }
      }
    }
    // 应用封装的节流函数
    document.addEventListener('scroll',throttle(function() {console.log('这是带有大量计算的函数')
    },2000))

1. 函数防抖 - 封装

    /* 
      用来返回防抖函数的工具函数
    */
    function debounce(callback, delay) {return function (event) {
        // 如果上次事件还没有真正解决, 勾销它
        // if (callback.timeoutId) { // 会查找原型链
        if (callback.hasOwnProperty('timeId')) { // 不会查找原型链
          // 革除
          clearTimeout(callback.timeId)
        }

        // 发事件产生指定事件后才调用处理事件的回调函数
        // 启动定时器, 只是筹备真正解决
        callback.timeId = setTimeout(() => {
          // 正在处理事件
          callback.call(this, event)
          // 删除筹备解决的标记
          delete callback.timeId
        }, delay)
      }
    }

    // 应用封装的防抖函数
    document.querySelector('.input').addEventListener('input',debounce((e)=>{console.log(e.target.value)
    },1000))
    

## 六、间接应用

1. 函数节流 - 间接应用

      // 定义一个记录时间的变量
      let flagTime = Date.now()
      // 间接应用函数节流
      document.addEventListener('scroll',function(e) {let current = Date.now()
        // 示意 1000 毫秒执行一次
        if(current-flagTime<1000) return
        // 执行代码
        console.log('我是带有大量计算的函数')
        // 最初批改原来的工夫
        flagTime = current
      })

1. 函数防抖 - 间接应用

 document.querySelector('.input').addEventListener('input',function(e) {
  // 判断 this.timeId 是否有值
  if(this.timeId) {
    // 有就革除定时器
    clearInterval(this.timeId)
  }
  // 为 this.timeId 赋值, 定时器示意 1000 毫秒内触发了 input 事件就不执行, 只有超过了 1000 毫秒才执行
  this.timeId = setTimeout(()=>{console.log(e.target.value)
  },1000)
})