useDebounceFn

関数の実行をデバウンスします。

デバウンスは過負荷のウェイターのようなものです。あなたがリクエストを続けると、彼はあなたが止まって最新の問い合わせについて考える時間を与えるまで無視します。

使用法

import { useDebounceFn, useEventListener } from '@vueuse/core'

const debouncedFn = useDebounceFn(() => {
  // 何かを実行
}, 1000)

useEventListener(window, 'resize', debouncedFn)

lodash debounceと同様に、最大待機時間を指定する3番目のパラメータを渡すこともできます。

import { useDebounceFn, useEventListener } from '@vueuse/core'

// 繰り返しの入力により5000ms後に呼び出しがない場合でも、関数は呼び出されます。
const debouncedFn = useDebounceFn(() => {
  // 何かを実行
}, 1000, { maxWait: 5000 })

useEventListener(window, 'resize', debouncedFn)

オプションとして、promise操作を使用して関数の戻り値を取得することができます。

import { useDebounceFn } from '@vueuse/core'

const debouncedRequest = useDebounceFn(() => 'response', 1000)

debouncedRequest().then((value) => {
  console.log(value) // 'response'
})

// または async/await を使用
async function doRequest() {
  const value = await debouncedRequest()
  console.log(value) // 'response'
}

開発者が戻り値を必要としない場合、未処理の拒否エラーは非常に厄介なので、関数がキャンセルされた場合、promiseはデフォルトで拒否されません。拒否をキャプチャするには、オプションrejectOnCancel: trueを指定する必要があります。

import { useDebounceFn } from '@vueuse/core'

const debouncedRequest = useDebounceFn(() => 'response', 1000, { rejectOnCancel: true })

debouncedRequest()
  .then((value) => {
    // 何かを実行
  })
  .catch(() => {
    // キャンセルされたときに何かを実行
  })

// 再度呼び出すと、前のリクエストがキャンセルされ、拒否されます
setTimeout(debouncedRequest, 500)

推奨読書

• Debounce vs Throttle: Definitive Visual Guide