JS 实现一个发送验证码的计时器效果(附 React 中实现)

一、实现效果

需求:

  1. 点击按钮后开始读秒
  2. 读秒期间不可点击
  3. 读秒结束后可以继续点击

二、实现思路(步骤)

  1. 要做到计时器的效果,首先得实现一个读秒的效果
typescript 复制代码
let count = 60; // 这里只做演示说明 Gif 中是 10
setInterval(() => {
  count = count - 1
}, 1000)
  1. 清除定时器的效果,处理状态
typescript 复制代码
let count = 10;
let timer = setInterval(() => {
  count = count - 1
}, 1000)

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

注:

这里对于 setTimeout 清理 setInterval 这个定时器做一个说明

原本我的实现是在 setInterval 的执行中通过判断计数来销毁这个定时器的,但是发现定时器依然在执行,执行的原因是:setInterval 函数会在执行完回调函数后,创建一个新的定时器,并将旧的定时器销毁。 因此,当你在 setInterval 中执行 clearInterval 时,实际上是清除了一个已经被销毁的定时器。

通过以上两步,就可以实现了需求 1。将上述操作封装函数就可以得到一个简单的定时器功能了。

  1. 处理定时器的读秒期间不可点击实现(需求 2
typescript 复制代码
/**
 * @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)
}

在这里我是将逻辑部分抽离为工具函数的使用,在实际项目中有步骤 2,在合适的时机做相对应的逻辑处理,基本够用了。

这段代码的实现基本没什么大的问题了,tiggering 状态的维护是放在了工具函数之外,感觉不是很优雅。在函数内部的实现话就需要用到闭包维护内部函数的形式来保护这个变量了,这点大家可以看看表达下自己的想法~

三、封装一个适用的 React 自定义 hook

实现思路大致和 步骤 3 类似:
typescript 复制代码
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]
}
组件中使用

这里简写实现过程

jsx 复制代码
// ... 引入略
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>
)

小结

在实现这套流程的时候,一开始觉得是个简单的实现,在实现过程中还是踩了一些小坑的,比如上文中说到的 clearInterval 的销毁时机的问题;以及考虑了下普通函数封装(步骤 3)。

先记录一下~

如果有所帮助,可以点赞,另外文章中有书写✍🏻 不清晰或不到位的地方希望大家可以指出,谢谢。

相关推荐
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
334554325 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
PleaSure乐事5 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶5 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json