前端性能优化之防抖、节流

本篇主要封装防抖、节流方法，并简述它们的使用场景：

防抖：

/**
 * 如果短时间内触发多次同一事件，只执行一次
 * @param {*} callback callback: 需要处理的回调函数
 * @param {*} delay delay：期限
 * @returns 
 */
export function debounce(callback, delay) {
  return function (event) {

    // 如果上次事件还没有真正处理, 取消它
    // if (callback.timeoutId) { // 会查找原型链
    if (callback.hasOwnProperty('timeoutId')) { // 不会查找原型链
      // 清除
      clearTimeout(callback.timeoutId)
    }

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

场景：1输入框的远程搜索，用户在规定的时间内连续输入文字不进行搜索，当输入完毕后，再进行搜索

　　　2.表单操作，防止用户短时间内双击或多次点击，造成重复提交

　　　3.window的resize事件，避免不断调整窗口大小而一直触发该事件，当调整结束后再调用该事件

 

节流：

/*
  如果短时间内触发多次同一事件，那么在函数执行一次之后，在规定时间内不再触发，直至过了这段时间再次触发
  callback: 传入回调函数
  delay：间隔
 */
export 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
    }
  }
}

场景：1.轮播图的翻页，避免翻页速度过快，影响页面观感

　　　2.window的scroll事件，每隔一段时间来触发scroll事件

　　　3.表单的提交，修改表单的时候，让其在一段时间内只能修改一次，避免短时间内修改很多次

 

脚踏实地行，海阔天空飞