MoreHook

Appearance

Return to top
On this page

useThrottle

处理节流值

  • 不同于 useThrottleFn,此函数专门用来对某个值的节流变化

Demo

source

源数据 state: 0.5069285112523967

节流数据 throttleState: 0.5069285112523967

Usage

html
<template>
  <div>
    <p>源数据 state: {{ state }}</p>
    <p>节流数据 throttleState: {{ throttleState }}</p>

    <button @click="changeState">节流更改state</button>
  </div>
</template>

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

const state = ref(Math.random())
const throttleState = useThrottle(state)

function changeState() {
  state.value = Math.random()
}
</script>

Type Declarations

typescript
/**
 * 处理节流值
 * 不同于 useThrottleFn,此函数专门用来对某个值的节流变化
 * @param value 监听的源数据
 * @param delay 节流设定时间 (默认 1000)
 * @returns
 */
export declare function useThrottle<T>(value: Ref<T>, delay?: number): Ref<T>

Source

Source • Demo • Docs