> For the complete documentation index, see [llms.txt](https://yanzhandong868.gitbook.io/v3hooks/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yanzhandong868.gitbook.io/v3hooks/side/usedebouncefn.md).

# useDebounceFn

## 使用

```
<template>
    <div>
      <p style="marginTop: 16"> Clicked count: {{debounceFnValue}} </p>
      <button type="button" @click="debounceFnRun">
        useDebounceFn测试
      </button>
    </div>
</template>

<script lang="ts">

import { ref } from 'vue';
import { useDebounceFn } from 'v3hooks';


export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },

  setup() {
    const debounceFnValue = ref<number>(1);
    const { run:debounceFnRun } = useDebounceFn(()=>{
      debounceFnValue.value++
    },500)

    return {
      debounceFnValue,
      debounceFnRun,
    }
  }
}
</script>
```

频繁调用 debounceFnRun，但只会在所有点击完成 500ms 后执行一次相关函数

## Api

### Params

|  参数  |     说明     |     类型     |  默认值 |
| :--: | :--------: | :--------: | :--: |
|  fn  |  需要防抖执行的函数 | () => void |   -  |
| wait | 超时时间，单位为毫秒 |   number   | 1000 |