Module vx-hooks/useDebounce

useDebounce

• useDebounce<T>(watchFn: (() => T) | Ref<T> | ComputedRef<T>, wait?: number): useDebounceAPI<T>

• 防抖值

  summary

  通过监听观察对象的变化，延时修改目标值

  tips

  1. 因为使用了 watch，所以只在观察对象值变化时，触发更新
  2. 内部对 wait 缩短的 0.01s, 因为回调触发是在延时时间结束后，如果我们 配合在 async await 中使用，我们直接配置 wait 作为间隔时间，将无法观察到 值的变化.

  example

  
  const watchVal = ref(0)
  const { state, watchStop, cancel } = useDebounce(watchVal)
  
  watchval.value = 1
  watchval.value = 2
  watchval.value = 3
  
  console.log(state.value) // 0
  
  // 延时更新
  // delay 1s
  console.log(state.value) // 3
  
  
  // 取消某次赋值
  watchval.value = 4
  cancel()
  
  //delay 1s
  console.log(state.value) // 3
  watchval.value = 4
  //delay 1s
  console.log(state.value) // 4
  
  
  // 中断监听
  watchStop()
  watchval.value = 5
  // delay 2s
  console.log(state.value) // 4
  
  

  Type parameters

  • T

  Parameters

  • watchFn: (() => T) | Ref<T> | ComputedRef<T>

    watch 被监听函数 / 取值函数

  • wait: number = 1

    延时时常(s)

  Returns useDebounceAPI<T>