防抖(debounce)

设置一个时间, 在这段时间内再次触发同一事件, 当前的计时取消，重新开始计时, 设置时间过了才会执行 ( 电梯 )

    hInput () {
      clearTimeout(this.timer)
      console.log(this.keyword)
      this.timer = setTimeout(() => {
        this.doAjax()
      }, 200)
    },
    async doAjax () {
      if (this.keyword === '') {
        this.suggestions = []
        return
      }

      try {
        const res = await getSuggestion(this.keyword)
        // console.log(res)
        this.suggestions = res.data.data.options
      } catch (err) {
        console.log(err)
      }
    }
复制代码

节流(throttle)

让事件执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活 ( 阀门 )

    hInput () {
      const dt = Date.now() // 获取当前时间戳 ms为单位
      if (dt - this.startTime > 500) {
        this.doAjax()
        this.startTime = dt
      } else {
        console.log('当前的时间戳是', dt, '距离上一次执行不够500ms,所以不执行')
      }
    },
    async doAjax () {
      if (this.keyword === '') {
        this.suggestions = []
        return
      }

      try {
        const res = await getSuggestion(this.keyword)
        // console.log(res)
        this.suggestions = res.data.data.options
      } catch (err) {
        console.log(err)
      }
    }
复制代码