vhooks

简介

为传入的function添加debounce处理，并提供run函数和cancel函数

代码演示

基本使用

count is: 0

代码

<template>
  <div class="text">count is: {{ count }}</div>
  <button class="button" @click="run">click</button>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue'
import { useDebounceFn } from '@packages'

export default defineComponent({
  name: 'UseDebounceFn',
  setup: () => {
    const count = ref(0)
    const { run } = useDebounceFn(
      () => {
        count.value += 1
      },
      1000,
      true
    )
    return { count, run }
  }
})
</script>

<style scoped>
.text {
  margin: 20px 0;
}
.button {
  margin: 0 0 20px 0;
  cursor: pointer;
}
</style>

API

const { run, cancel } = useDebounceFn(func, wait);

Retrun

参数说明类型
run代理原函数的新debounce函数function
cancel在wait时间到达之前，提供一个取消当前run的方法function

Params

参数说明类型默认值
func传入的函数function-
wait防抖的时间间隔number500ms
immediate是否立即执行booleanfalse