关于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)
})