MoreHook

Appearance

Return to top
On this page

useDebounce

处理防抖值 - 连续触发只会更新一次值

Demo

source

data: 0.31634423271365053
点击 0 次

Usage

html
<template>
  <div>
    <div>data: {{ data }}</div>
    <button @click="() => (originData = Math.random())">
      点击更改 data
    </button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useDebounce } from '@morehook/core'

const originData = ref(Math.random())

const data = useDebounce(originData, 1000, true)
</script>

Type Declarations

typescript
/**
 * 处理防抖值 - 连续触发只会更新一次值
 * @param fn 待执行函数
 * @param delay 防抖时间
 * @param firstTrigger 是否需要首次点击时立即触发(这里的首次指的并不是第一次，每当防抖时间过了都会刷新首次) (默认 false)
 * @returns
 */
export declare function useDebounce<T>(
  value: Ref<T>,
  delay?: number,
  firstTrigger?: boolean
): Ref<T>

Source

Source • Demo • Docs