上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useTimeout

Tags:
Animation
Pausable

一个 React Hook，用于创建一个在指定延迟后变化的状态。

演示

尝试在两秒内快速点击检查按钮，两秒后再试一次，或重置超时并再次尝试。

源码
isTimeout:
false
isTimeout:
false

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const isTimeout = useTimeout(2000)
const { isTimeout, start, pause, reset } = useTimeout(2000, { controls: true })

间隔时间 Interval

一个 number 类型，表示延迟的毫秒数。

选项 Options

export interface UseTimeoutOptions<Controls extends boolean, Callback extends AnyFunc = AnyFunc>
  extends UseTimeoutFnOptions {
  /**
   * 暴露更多控制项
   *
   * @defaultValue false
   */
  controls?: Controls
  /**
   * 超时回调
   */
  callback?: Callback
}

返回值

export type UseTimeoutReturns<Controls extends boolean, C extends AnyFunc = AnyFunc> = Controls extends true
  ? Pausable<[], Parameters<C> | []> & {
      /**
       * 超时状态
       */
      isTimeout: boolean
      /**
       * 重置超时
       */
      reset(): void
    }
  : boolean