Skip to content

useDebounceFn

用来处理防抖函数的 Hook。

使用

<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 '@dfsj/hooks';


export default {
  
  

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

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

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

Api

Params

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