指南
Hooks
指南
Hooks

useTimeout

以 Hook 的方式使用 setTimeout，并自动处理组件卸载时的定时器清理。

基础用法

import { useTimeout } from 'miaoma-rhooks'
import React, { useState } from 'react'

function DelayedMessage() {
    const [message, setMessage] = useState('等待中...')

    useTimeout(() => {
        setMessage('已完成！')
    }, 2000) // 2秒后执行

    return <p>{message}</p>
}

API

useTimeout(
  fn: () => void,
  delay?: number | null
): {
  clear: () => void;
};

Params

参数 说明 类型 默认值
fn 要延迟执行的函数 () => void -
delay 延迟时间，单位为毫秒。设置为 null 或 undefined 时会停止计时器 number | null | undefined undefined

Result

参数 说明 类型
clear 清除当前计时器 () => void

进阶用法

动态调整延迟时间

import { useTimeout } from 'miaoma-rhooks'
import React, { useState } from 'react'

function DynamicTimeout() {
    const [message, setMessage] = useState('等待中...')
    const [delay, setDelay] = useState(3000)
    const [started, setStarted] = useState(false)

    useTimeout(
        () => {
            setMessage('已完成！')
            setStarted(false)
        },
        started ? delay : null
    )

    return (
        <div>
            <p>{message}</p>
            <p>延迟: {delay}ms</p>
            <input type="range" min="1000" max="5000" step="1000" value={delay} onChange={e => setDelay(Number(e.target.value))} />
            <button
                onClick={() => {
                    setMessage('等待中...')
                    setStarted(true)
                }}
                disabled={started}
            >
                开始倒计时
            </button>
        </div>
    )
}

手动清除

import { useTimeout } from 'miaoma-rhooks'
import React, { useState } from 'react'

function CancellableTimeout() {
    const [message, setMessage] = useState('等待中...')

    const { clear } = useTimeout(() => {
        setMessage('已完成！')
    }, 5000)

    return (
        <div>
            <p>{message}</p>
            <button
                onClick={() => {
                    clear()
                    setMessage('已取消！')
                }}
            >
                取消
            </button>
        </div>
    )
}

条件执行

import { useTimeout } from 'miaoma-rhooks'
import React, { useState } from 'react'

function ConditionalTimeout() {
    const [message, setMessage] = useState('未开始')
    const [shouldRun, setShouldRun] = useState(false)

    useTimeout(
        () => {
            setMessage('已完成！')
            setShouldRun(false)
        },
        shouldRun ? 2000 : null
    )

    return (
        <div>
            <p>{message}</p>
            <button
                onClick={() => {
                    setMessage('等待中...')
                    setShouldRun(true)
                }}
                disabled={shouldRun}
            >
                开始
            </button>
        </div>
    )
}
ON THIS PAGE