基于JS实现发送验证码的计时器效果

let count = 60; // 这里只做演示说明 Gif 中是 10
setInterval(() => {
  count = count - 1
}, 1000)

let count = 10;
let timer = setInterval(() => {
  count = count - 1
}, 1000)

// 这里我用 setTimeout 来做 clearInterval 的操作
setTimeout(function () {
  timer && clearInterval(timer)
  // 清理定时器的时机为 10 次之后
}, 10 * 1000)

/**
 * @param {number} initCount 调用次数
 * @param {(count: number) => count} time 定时器执行时间间隔
 * @returns [开始调用, 计数器, 是否执行中]
 */
let tiggering = false;
export const tigger = (initCount = 60, callback: (count: number) => count) => {
    let count = initCount;
    let timer: NodeJS.Timeout | null = null
    
    // 如果未触发，则可以执行定时器
    if (!tiggering) {
        tiggering = true
        timer = setInterval(() => {
            count = count - 1
            // 定时器每次执行后更新回调，这样可以在页面使用该状态
            callback(count)
        }, time)
    }

    setTimeout(function () {
        // 定时器结束时设置更新触发状态
        tiggering = false
        timer && clearInterval(timer)
    }, count * time)
}

import { useState } from 'react'

/**
 * @param initCount 调用次数
 * @param time 定时器执行时间间隔，这里支持修改真实的时间间隔
 * @returns [开始调用, 计数器, 是否执行中]
 */
export default (initCount = 120, time = 1000): [() => void, number, boolean] => {
  // 维护调用次数
  const [count, setCount] = useState(initCount)
  // 维护触发状态，用于 UI 部分实现禁用
  const [tiggering, setTiggering] = useState(false)

  let timer: NodeJS.Timeout | null = null
  const tigger = () => {
    // 注：在这里又进行了一次 setCount 赋值操作，是为了解决第一次验证码读秒结束后，
    // 第二次验证码执行（tigger 函数调用）时，自定义 hook 已经执行，count 的值为 0 的情况
    setCount(initCount)
    if (!tiggering) {
      setTiggering(true)
      timer = setInterval(() => {
        setCount(count => count - 1)
      }, time)
    }

    setTimeout(function () {
      timer && clearInterval(timer)
      setTiggering(false)
    }, initCount * time)
  }

  return [tigger, count, tiggering]
}

// ... 引入略
const [tigger, count, tiggering] = useTimeCount(10)

const sendCode = () => {
    // 发送验证吗
    getMailCode({ receiver: code }).then(res => {
        if (res) {
            tigger()
            // 这里可以执行其他逻辑，如发送成功的提示
        }
    })
}

return (
    <Button disabled={tiggering} className='send-btn' onClick={sendCode}>
        {tiggering ? `${count}s` : 'Send code'}
    </Button>
)