lodash debounce って何？

vue の勉強をしている際に、しらっと、あまり説明もなく、lodash というライブラリが出てきて、そのライブラリの debounce という関数を使うソースがありました。よくわからないので調べました。

lodash は大変便利なのですが、関数が多すぎてどれ使ったらいいのか解りづらいのが難点です。ここではその中でも連続する呼び出しを無視してくれる debounce と throttle という負荷対策用の関数を紹介します

lodash の中には、関数がたくさんあって、その中の１つにdebounce があるらしい。

多重クリックや、サーバへの問い合わせを短時間で連続で行わないようにする事を簡単にできる関数のよう。

上記のブログは、react で書いてあるけど、vueで書いてみると、
(Vue.js 3.1.5を使用)

1) debounce 使わない。

javascript

const app = Vue.createApp({
    data: () => ({
        message: ''
    }),
    watch: {
        message: function(value){
          console.log(value)
        }
    }
})
app.mount('#app')

html

    <div id="app">
        <p>入力テキスト: <input type="text" v-model="message"> </p>
    </div>

入力する度に、入力した文字が、コンソールに表示される。

2) debounce 使う。

debounce は、以下のように書いて使う。
_.debounce(関数, wait時間)

javascript

const app = Vue.createApp({
    data: () => ({
        message: ''
    }),
    watch: {
        message: _.debounce(function(value){
            console.log(value)
        }, 1000)
    }
})
app.mount('#app')

（wait時間 = 1000 とすると、1秒。）
文字入力が1秒以内に行われなければ、関数が呼ばれる。
1秒開けずに連続して文字入力をし続けてれば、その間は関数は呼ばれない。

例えば、a と入力して、1秒以上待ち、(コンソールにaだけ出力される)、さらにiueoと連続して文字入力し、1秒以上待った時、(コンソールの２行目にはaiueoと出力される)
以下のようにコンソールに表示された。

maxWait を指定する。

maxWait を指定すると、文字入力をし続けていても、maxWaitごとに関数が呼ばれるようになる。

javascript

const app = Vue.createApp({
    data: () => ({
        message: ''
    }),
    watch: {
        message: _.debounce(function(value){
            console.log(value)
        }, 1000, { maxWait: 1000 })
    }
})
app.mount('#app')

maxWait = 1000 を指定したので、aiueoを止まらずに連続して入力し続けても、１秒ごとにコンソール出力されるようになった。
(maxWait指定しない場合であれば、文字の入力間隔を１秒以上開けないとコンソール出力されなかった)