定時器setTimeout實現函數節流

問題描述

文字輸入查詢的keyup或oninput事件，實現實時查詢功能。
在用戶輸入過程當中，用戶可能只想須要 '小' 字的查詢結果，可是以上兩個事件會觸發'x'、'i'、'a'、'o'、'小'，一共5次。
其中某個查詢的匹配結果數據量大，返回速度慢，就會覆蓋掉最終'小'字的查詢結果。

解決方案

最開始我用函數節流或者是函數防抖的方法處理，在調試過程當中報錯。
緣由是vue 2.0 移除了 debounce 屬性，具體請查看從 Vue 1.x 遷移文檔。

最後手寫了一個定時器，解決問題~~

<template>
  <div>
    <input type="text" @keyup="searchMedicine">
  </div>
</template>

<script>

  export default {
    data() {
      return {
        changeTime: new Date().getTime()
      }
    },
    methods: {
      searchMedicine() {
        this.changeTime = new Date().getTime()
         // 定時器    過濾密集輸入
        setTimeout(() => {
          if (new Date().getTime() - this.changeTime >= 1000) {
            this.getDatas()
          }
        }, 1000)
      },
      getDatas() {
         // 這裏寫請求
         console.log('我是請求返回結果~~~~')
      }
    }
  }
</script>

總結

寫的很粗糙，但願你們指點。