vue中手动实现输入框延迟检验

有一个很普通的需求，在某些输入框检验字段时采用输入时检验，但是这个检验是有延迟的，当用户连续输入时，不会出现错误提示，只有当用户停止输入一定时间才去检验，下面是效果：

有很多插件或者ui框架都能实现这种需求，但这个效果实现起来比较简单，我更偏向于自己手动实现下，减少第三方引入，下面先放上完整的代码：

<template>
  <div class="index">
    <div class="box">
      <span>手机号：</span>
      <input
        class="input"
        type="text"
        placeholder="请输入手机号"
        v-model="input"
        @input="handleInput($event)"
      >
      <p class="tip">{{errTip}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      errTip: '',
      input: ''
    }
  },
  methods: {
    handleInput (e) {
      this.inputTime = e.timeStamp // 主要
      this.errTip = '' // 清空错误提示
      setTimeout(() => {
        if ((this.inputTime - e.timeStamp) === 0) { // this.inputTime拿的是最新的值，e.timeStamp拿的是零点五秒前函数的e.timeStamp
          if (!this.input) {
            this.errTip = '请输入手机号'
          } else if (!/^1[3456789]\d{9}$/.test(this.input)) {
            this.errTip = '手机号格式错误'
          }
        }
      }, 500)
    }
  }
}
</script>

1. 首先去监听输入框的输入事件，同时传入event 参数，这个event就是指原生dom对象，在这里指的就是input元素，如果是使用ui框架的输入框需要加上native修饰符，才能获取到event对象。
2. 来到输入框的输入事件中，通过传入的event对象中的timeStamp可以获取到每一次输入的时间，并将保存到一个变量中，这个变量需要保存在函数作用域之外的（重要）。
3. 之后零点五秒去判断this.inputTime与e.timeStamp，注释也写了，此时的this.inputTime是最新的e.timeStamp，而e.timeStamp则是零点五秒前传入的数值，这就是靠第二步中的将变量保存到函数作用域实现的。所以只有在零点五秒内用户没有再次输入，this.inputTime与e.timeStamp的值才会相等，才会走入if之中，去执行校验。