(Vue3)vue-useでdebounceとthrottleを使う #JavaScript

短時間に同じ処理が何度も行われる時に、何となくdebounceとthrottleを使って解決できることは知っていた。しかし、実装した経験がなかったので調べてみた。

debounceとthrottleとは？

個人的にはボタンの連打防止をイメージしている。
その中で、debounceとthrottleはそれぞれ違った方法でその目的を果たす。

vueuseさんがドキュメントに載せているビジュアルガイドがすごく分かりやすかった。
直接触ったらすぐ理解できたので皆さんもぜひ。

処理がない時

throttle

まずは処理を実行して、指定した間隔内に同じ処理は実行しない。
したがって、最初の処理が実行される。

debounce

指定した間隔内に処理が複数回行われたら、処理を実行しない。
したがって、連打したら最後の処理だけが実行される。

debounceの場合、間隔内に処理が実行され続ける限りは、理論上無限に処理が実行されない。

実装

jsでは内蔵関数としてこれらをサポートしているわけではない。

以下のように自作のものをutilsなどに置いて使うこともできそう。

js共通で使えるものとしてはlodashのメソッドを使っているのをよく見かける。

私はvueの開発をしているため、今回はvue-useを使って実装したい。

`useDebounceFn`, `useThrottleFn`

基本的な使い方は簡単。引数としてコールバックと待機時間(ms)を渡すだけ。
以下は公式の例。

debounce.js

import { useDebounceFn } from '@vueuse/core'

const debouncedFn = useDebounceFn(() => {
  // do something
}, 1000)

window.addEventListener('resize', debouncedFn)

throttle.js

import { useThrottleFn } from '@vueuse/core'

const throttledFn = useThrottleFn(() => {
  // do something, it will be called at most 1 time per second
}, 1000)

window.addEventListener('resize', throttledFn)

終わりに

debounceとthrottleの存在を知っているだけでできる実装の幅が広くなることを感じる。
まだデザインパターンとか全然わかっていないため、勉強していきたい。

(Vue3)vue-useでdebounceとthrottleを使う