前端性能优化系列——debounce

背景

在某司收银系统的需求中，有一项快捷键的需求，
需要支持包括F1~9,Enter,上下左右等，快速打开窗口或处理业务。

原始实现

document监听onkeyup事件

document.onkeyup = function (e) { swich(e.keyCode) ...}

第一次优化

优化点：快速点击按键，会多次触发事件（店员心情不好时，会暴力敲键盘），如有接口请求，带来大量的网络开销，导致dom不断重复加载，甚至UI停顿。

document.onkeyup = function (e) {
      let oTime = clickTime
      clickTime = Number(new Date())
      if ((clickTime - oTime) / (1000) <= 0.5) {
        return
      }

第二次优化

优化点：抽象debounce函数，代码逻辑划分更加清晰

exports.debounce = (cb, wait) => {
  let timeout
  return (...args) => {
    const context = this
    clearTimeout(timeout)
    timeout = setTimeout(() => cb.apply(context, args), wait)
  }
}

document.onkeyup = debounce(function (e) { *** }, 500)

总结

resize、scroll、mousemove、mousedown、keydown、keyup这些事件往往会因用户操作频繁被触发，因而频繁执行dom操作、资源加载等重复行为，导致UI停顿甚至浏览器崩溃，在处理上述事件是，需要加debounce优化。

结束语

由于本人能力有限，有写的不对的地方，欢迎各位批评指正，有兴趣一起研究的朋友可以评论留言，谢谢。