lodash の debounce で多重クリックを回避する

はじめに

どうもはるうさぎです。今回は案件内で、問題があったのでそれを解決したよ〜っていう話です。
備忘録です。

背景

最近では、スマホだとボタンが消えるまで何回もタップしてしまったり、
マウスでもボタンが押せなくなるまでクリックしたりなど、ユーザーが予期しないクリックをすることがあります。
今回は多重クリックが問題だったので、クリックを無視してくれる関数が欲しい！
それが debounce です。

どうやった？

こんな感じ

index.vue

<Button
　　:text="投稿する"
　　@click="submitDebounce"
/>


import { Component, Vue, Watch } from '@/node_modules/nuxt-property-decorator';
import Button from '@/components/buttons/Button.vue';
import { debounce } from 'lodash';

@Component({
  components: { Button },
})

export default {

　　async submit(): Promise<void> {
 　　　//省略
  }

　　　submitDebounce = debounce(this.submit, 500);　←ここ！

}

注意していただきたいのが、debounceは関数を返す関数です。
今回は既に投稿ボタンがあったので、そのsubmitの中でごちょごちょとしてます。
これで何回クリックしようが、0.５秒遅延して1回しかクリックできなくなっています。

※vue-property-decoratorが導入されています。