Vue、JS——定时器倒计时封装

/* 倒计时 
	@param onBefor 创建定时器前的回调函数, 返回true定时器才会开始,支持promise
	@param onUpdate 定时器每秒执行的回调函数
	@param second 定时器执行总时长
	@param endContext 定时器结束时返回的文案
*/
let countDownTimer = null
export async function countDown(onBefor = () => { }, onUpdate = (second) => { }, second = 60 ,endContext) {
	let _second = second
	if (countDownTimer)return
	if(onBefor instanceof Promise){
		if(!await onBefor)return
	}else{
		if(!onBefor())return
	}
	countDownTimer = setInterval(() => {
		_second--
		onUpdate(_second,_second == 0 && endContext)
		if (_second == 0) {
			clearInterval(countDownTimer)
			countDownTimer = null
			_second = second
			return
		}
	}, 1000)
	return true
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

//使用-发送短信为例
import {countDown} from "utils.js"
/* 请求短信接口成功后开始执行倒计时 */
const getCode = new Promise(r=>{
	/* 模拟请求 */
	setTimeout(()=>{
		r(true)
	},2000)
})
/* 更新发送按钮的文案 */
const update = (second,endText)=>{
	if(endText)return this.sendCodeText = endText
	this.sendCodeText = `${second}后重试`
}
countDown(getCode,update,5,"发送验证码")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15