useDebounceFn

类别

Utilities

导出体积

388 B

上次更改

2 months ago

示例

源码 playground (beta)

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

按钮点击次数：0

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

使用方法

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

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

useEventListener
(window
, 'resize', debouncedFn
)

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

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)

类型声明

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