useInterval

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

演示

源码
Intervals:
0
Count:
0
Active:
false

用法

请查看 API。

源码

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

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