Vue.jsで入力を止めて一定時間経ったら発火するinputの作成方法｜Lodashの「debounce」を活用

2022年9月8日

Vue.jsで@inputを使うと、1文字入力する度にイベントが発火してしまいます。
これだと処理が大量に発生してしまいますが、かと言って@changeだと入力後別の場所をクリックするなどしてフォーカスが外れたときにようやく発火します。

「入力していて、一定時間入力が止まったら自動保存」みたいに、「一定時間入力が止まったら○○する」は、よく使いそうなので、今回はその方法をまとめておきます。

lodashのインストール

lodashというモジュールを使用すると、かなりラクに実現できます。
まずは下記コマンドでインストールします。

npm install -d lodash

lodashの使い方

lodashをインストールしたら、.vueファイル内で「debounce」という関数を使って時間を指定します。

「setTimeout」を使った遅延処理の場合は遅れるだけで何度も発火してしまいますが、「debounce」の場合は発火は1回で、連続して関数が実行されている場合は発火せずに、止まってから指定した時間分待って発火します。

Vue3の場合

Vue3から登場したComposition APIを使って書きたい場合は下記のように書きます。

<template>
  <label>
    <input @input="onDelayAction">
  </label>
</template>

<script>
import { defineComponent, reactive } from "vue";
import { debounce } from 'lodash';

export default defineComponent({
  name: 'delayInput',
  setup() {
    let state = reactive({
    });

    const onDelayAction = debounce(() => {
      // 発火したい処理を書く
    }, 2000) // 2000ms指定

    return {
      state,
      onDelayAction
    }
  }
});
</script>

今回は時間指定に「2000」を指定しているので、入力後に2000ms（2秒）止まったら発火します。

書き方は「setTimeout」を使った遅延処理とほとんど変わらず、名前が「debounce」に変わったくらいです。

Vue2の場合

Vue2の古いOption APIの場合は下記のように書きます。
Vue3でも一応この書き方は可能です。

<template>
  <label>
    <input @input="onDelayAction">
  </label>
</template>

<script>
import { debounce } from 'lodash';

export default {
  name: 'hogeComponent',
  methods: {
    onDelayAction: debounce(() => {
      // 発火したい処理を書く
    }, 2000) // 2000ms指定
  }
}
</script>