useDebounceFn

Demo

此演示中延迟设置为 1000ms，最大等待时间设置为 5000ms。

按钮点击次数：0

事件处理程序调用次数：0

使用方法

import { useDebounceFn } from '@vueuse/core'

const debouncedFn = useDebounceFn(() => {
  // 做一些事情
}, 1000)

window.addEventListener('resize', debouncedFn)

你还可以传递第三个参数给它，带有一个最大等待时间，类似于 lodash debounce

import { useDebounceFn } from '@vueuse/core'

// 如果在重复输入后 5000ms 内没有调用，该函数将被调用。
const debouncedFn = useDebounceFn(() => {
  // 做一些事情
}, 1000, { maxWait: 5000 })

window.addEventListener('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)

类型声明

typescript

/**
 * 延迟执行函数。
 *
 * @see https://vueuse.org/useDebounceFn
 * @param  fn          要在延迟毫秒后执行的函数。
 * @param  ms          毫秒为单位的延迟时间，必须为零或更大。对于事件回调，最有用的值大约为 100 或 250（甚至更高）。
 * @param  options     选项
 *
 * @return 一个新的延迟函数。
 */
export declare function useDebounceFn<T extends FunctionArgs>(
  fn: T,
  ms?: MaybeRefOrGetter<number>,
  options?: DebounceFilterOptions,
): PromisifyFn<T>