简体中文

useInterval

Tags:

Animation

Pausable

一个 React Hook，用于创建一个间隔计时器。

演示

源码

Intervals:

Count:

Active:

false

用法

请查看 API。

源码

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

🪝 Hook 🎨 Demo 📄 Document

API

const count = useInterval(interval)
const { count, reset, ...controls } = useInterval(interval, { controls: true })

间隔 Interval

一个 number 类型，代表以毫秒为单位的间隔时间。

选项 Options

export type UseIntervalOptions<Controls extends boolean> = {
  /**
   * 暴露更多控制功能
   *
   * @defaultValue false
   */
  controls?: Controls
  /**
   * 调用时立即执行更新
   *
   * @defaultValue true
   */
  immediate?: boolean
  /**
   * 每个间隔执行的回调
   */
  callback?: (count: number) => void
}

返回值

返回值中包含可暂停、恢复的 Pausable 实例。

更多详情，请参见 Pausable。

export interface UseIntervalAction extends UseCounterReturnsAction, Pausable {
  /**
   * 重置计数器
   */
  reset: (count?: number) => void
}

export type UseIntervalWithControlsReturns = [
  /**
   * 当前计数
   */
  count: number,
  /**
   * 计数器操作
   */
  UseIntervalAction,
]

export type UseIntervalReturns<Controls extends boolean> = Controls extends true ? UseIntervalWithControlsReturns : number

ON THIS PAGE

#useInterval

#演示

#用法

#源码

#API

#间隔 Interval

#选项 Options

#返回值

useInterval

演示

用法

源码

API

间隔 Interval

选项 Options

返回值