函数的节流(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))

2. 函数防抖-封装

    /* 
        用来返回防抖函数的工具函数
    */
    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
    })

2. 函数防抖-直接使用

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