vue タスクキューの実装

Question

補足情報（FW/ツールのバージョンなど）

vue.js 2.6

前提・実現したいこと

検索ボックスにキーワードを入力すると、候補をサジェストする機能を実装しています。
サジェストは、キーワードの変更を検知し、リアルタイムでサーバーに問い合わせを行います。

問題となっているのが、キーワード入力とキーワードクリアを高速に行った場合など、検索ボックスのキーワードとサジェストが一致しなくなることです。

例えば以下のシナリオでは、検索キーワードがクリア状態にも関わらず、画面にサジェスト結果が表示されることがあります。

1. キーワードを入力、サーバーに問い合わせ
2. キーワードをクリア（最終入力）、サジェスト結果もクリア
3. 1.の問い合わせ結果が返り、その結果を画面に表示（最終入力より応答が遅く、結果が上書きされてしまう）

上記の問題を解決するには、キーワード変更を検知したら一旦キューに格納し、最後の入力が最終表示となるように順次処理を行う必要があると思います。
さらに理想を言うなら、高速に入力された場合は入力過程のキーワードを無視して、最後の入力のみ処理できたらと思います。（0.5秒間隔ぐらいで更新？）

このような実装のプラクティスがあれば、教えていただけないでしょうか。

該当のソースコード

簡易的なソースですが、実装は次のようなものです。

watch:{
  keyword: {
    immediate: true,
    async handler(val) {
      if (val){
        this.result = await this.$axios.$get("https://myapi", {params: {keyword: val}})
      } else {
        this.result = null
      }
    }
  }
}

Answer 1

次のように解決しました。

監視処理

1. キーワードを受け取ったら、それを最新キーワード用の器に代入する
2. 0.5秒ごとに最新キーワードに値が存在すれば、更新処理を行う

更新処理

1. apiを実行し、結果を受け取る
2. 結果受取時に、最新キーワード用の器が更新されていなければ、結果を画面に反映し、最新キーワード用の器をクリアする