vue性能优化之函数防抖

一、背景

在上一篇文章中，我们介绍了如何实现城市列表随导航条滚动的功能
当用户不断拖动导航条的时候，会频繁地触发功能函数
这样会造成资源的浪费、降低页面运行的速度
因此，我们需要通过函数防抖(debounce)来解决这个问题

二、函数防抖的概念

函数防抖，即限制一个函数在一定时间内只能执行1次
实现方法之一，就是设置 timer+setTimeout 定时器
假设某事件将会触发某函数的执行：
当事件被触发时，通过setTimeout让这个函数延迟一会再执行，
如果在这个时间间隔内又触发了事件，就通过clearTimeout清除原来的定时器，并且再设置一个新的定时器

三、具体的代码实现

了解函数防抖的概念之后，我们就可以对上一篇文章中的拖动功能进行修改

handleTouchMove (event) {
  if (this.touchStatus) {
      // 如果timer正在计时，就清除它
      if (this.timer) {
        clearTimeout(this.timer)
      }
      // 延迟8ms执行箭头函数
      this.timer = setTimeout(() => {
      const startY = this.$refs['A'][0].offsetTop
      const touchY = event.touches[0].clientY          
      const index = Math.floor((touchY - 79 - this.startY) / 20)         
      if (index >= 0 && index < this.letters.length) {
        this.$emit('change', this.letters[index])
      }
    }, 8)
  }
}

当监听到用户拖动导航条时，延迟8ms再执行功能函数
若在这8ms内用户继续拖动导航条，则从0开始继续延迟8ms
这样就能在一定程度上优化用户体验，节省资源