背景
最近做了一個周末嘉年華的活動【免費領(lǐng)取「王者榮耀千元賬號」】，效果圖如下。玩法也很簡單：點擊開始，計時器開始計時，點擊停止，點擊開始按鈕后會變成停止，當計時結(jié)束時，秒表顯示時間為 10:00 時，即可獲取 「價值千元的王者榮耀賬號」！
編組
點我體驗 ?。?！
若遇到活動未開始或者活動結(jié)束，可以前往轉(zhuǎn)轉(zhuǎn)app搜索【游戲】即可參與更多活動，各種福利拿到手軟！
需求分析
從圖上可以看出來，核心就是一個正向計時器。通過js實現(xiàn)一個普通的正向計時器很簡單，大多數(shù)想到都是使用setInterval來實現(xiàn)。那么還有沒有其他的實現(xiàn)方式呢？又怎么去實現(xiàn)一個高精度的毫秒級正向計時器呢？
最近看了vant4的倒計時組件的源碼，發(fā)現(xiàn)其并沒有使用setInterval, 而是封裝了requestAnimationFrame 和利用 Date.now()來處理毫秒級渲染和倒計時實現(xiàn)。那么能不能通過requestAnimationFrame來實現(xiàn)一個正向計時器呢？
先看看效果圖，接下來將會一步步去實現(xiàn)：
體驗地址： https://suyxh.github.io/timer-demo/
setInterval版
首先呢，來看看使用setInterval是如何實現(xiàn)的。在網(wǎng)上看了很多文章，大多都是使用的 setInterval 去實現(xiàn)，大致效果如下：
setinterval
從效果圖上我們可以發(fā)現(xiàn)，最后一位始終為0，甚至還是有些小bug，很明顯不是我們想要的。具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" cnotallow="IE=edge">
<meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="timetext" value="00時00分00秒" readonly>
<br>
<br>
<button type="button" notallow="start()">開始</button>
<button type="button" notallow="stop()">暫停</button>
<button type="button" notallow="Reset()">重置</button>
<script>
//初始化變量
let hour, minute, second;//時 分 秒
hour = minute = second = 0;//初始化
let millisecond = 0;//毫秒
let int;
//重置函數(shù)
function Reset () {
window.clearInterval(int);
millisecond = hour = minute = second = 0;
document.getElementById('timetext').value = '00時00分00秒000毫秒';
}
//開始函數(shù)
function start () {
int = setInterval(timer, 50);//每隔50毫秒執(zhí)行一次timer函數(shù)
}
//計時函數(shù)
function timer () {
millisecond = millisecond + 50;
if (millisecond >= 1000) {
millisecond = 0;
second = second + 1;
}
if (second >= 60) {
second = 0;
minute = minute + 1;
}
if (minute >= 60) {
minute = 0;
hour = hour + 1;
}
document.getElementById('timetext').value = hour + '時' + minute + '分' + second + '秒' + millisecond + '毫秒';
}
//暫停函數(shù)
function stop () {
window.clearInterval(int);
}
</script>
</body>
</html>
requestAnimationFrame版
上文中提到vant的CutDown組件，主要就是利用 Date.now() 會自己走的原理，結(jié)合 requestAnimationFrame 去做時間計算；那么正向計時器則是利用了 requestAnimationFrame 回調(diào)函數(shù)的參數(shù)去做時間計算，從而實現(xiàn)毫秒級的計時器。
「window.requestAnimationFrame()」 告訴瀏覽器——你希望執(zhí)行一個動畫，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動畫。該方法需要傳入一個回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會在瀏覽器下一次重繪之前執(zhí)行，當你準備更新動畫時你應該調(diào)用此方法。這將使瀏覽器在下一次重繪之前調(diào)用你傳入給該方法的動畫函數(shù) (即你的回調(diào)函數(shù))。
「注意：」 若你想在瀏覽器下次重繪之前繼續(xù)更新下一幀動畫，那么回調(diào)函數(shù)自身必須再次調(diào)用 window.requestAnimationFrame()
MDN requestAnimationFrame
「參數(shù)」
- callback?下一次重繪之前更新動畫幀所調(diào)用的函數(shù) (即上面所說的回調(diào)函數(shù))。該回調(diào)函數(shù)會被傳入DOMHighResTimeStamp參數(shù)，該參數(shù)與performance.now()的返回值相同，它表示requestAnimationFrame() 開始去執(zhí)行回調(diào)函數(shù)的時刻。
「返回值」
一個 long 整數(shù)，請求 ID，是回調(diào)列表中唯一的標識。是個非零值，沒別的意義。你可以傳這個值給 window.cancelAnimationFrame() 以取消回調(diào)函數(shù)。
測試版
通過 requestAnimationFrame API可以知道，回調(diào)函數(shù)中的參數(shù)就是一個 DOMHighResTimeStamp參數(shù)，該參數(shù)與performance.now()的返回值相同，它表示requestAnimationFrame() 開始去執(zhí)行回調(diào)函數(shù)的時刻。
那我們直接使用該值不就可以了嗎？試試看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" cnotallow="IE=edge">
<meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">hello world</div>
<div id="status">這里顯示倒計時狀態(tài)</div>
<button class="start">開始</button>
<br />
<script>
const render = (time) => {
document.querySelector("#status").innerHTML = Math.floor(time) / 1000
}
const useCountUp = () {
let rafId;
let endTime;
const step = (timestamp) => {
console.log('timestamp', timestamp)
render(timestamp)
rafId = window.requestAnimationFrame(step)
}
const start = () {
rafId = window.requestAnimationFrame(step)
}
return {
start,
}
}
const { start } = useCountUp();
document.querySelector('.start').addEventListener('click', () => {
start()
})
</script>
</body>
</html>
效果如下：
測試版
雖然比較簡陋，但是并沒有出現(xiàn) setInterval版 的bug，接下來在一步步優(yōu)化。
簡易版
我們加上格式化時間的函數(shù) parseTime() 和 parseFormat()， 代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" cnotallow="IE=edge">
<meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">hello world</div>
<div id="status">這里顯示倒計時狀態(tài)</div>
<button class="start">開始</button>
<br />
<script>
/**
* @description: 補0操作
* @param {*} num
* @param {*} targetLength
* @return {*}
*/
function padZero (num, targetLength = 2) {
let str = num + ''
while (str.length < targetLength) {
str = '0' + str
}
return str
}
/**
* @description: 解析時間
* @param {*} time
* @return {*}
*/
function parseTime (time) {
const SECOND = 1000
const MINUTE = 60 * SECOND
const HOUR = 60 * MINUTE
const DAY = 24 * HOUR
const days = Math.floor(time / DAY)
const hours = Math.floor((time % DAY) / HOUR)
const minutes = Math.floor((time % HOUR) / MINUTE)
const seconds = Math.floor((time % MINUTE) / SECOND)
const milliseconds = Math.floor(time % SECOND)
return {
total: time,
days,
hours,
minutes,
seconds,
milliseconds,
}
}
/**
* @description: 格式化時間
* @param {*} format
* @param {*} currentTime
* @return {*}
*/
function parseFormat (format, currentTime) {
const { days } = currentTime
let { hours, minutes, seconds, milliseconds } = currentTime
if (format.includes('DD')) {
format = format.replace('DD', padZero(days))
} else {
hours += days * 24
}
if (format.includes('HH')) {
format = format.replace('HH', padZero(hours))
} else {
minutes += hours * 60
}
if (format.includes('mm')) {
format = format.replace('mm', padZero(minutes))
} else {
seconds += minutes * 60
}
if (format.includes('ss')) {
format = format.replace('ss', padZero(seconds))
} else {
milliseconds += seconds * 1000
}
if (format.includes('S')) {
const ms = padZero(milliseconds, 3)
if (format.includes('SSS')) {
format = format.replace('SSS', ms)
} else if (format.includes('SS')) {
format = format.replace('SS', ms.slice(0, 2))
} else {
format = format.replace('S', ms.charAt(0))
}
}
return format
}
/**
* @description: 渲染時間
* @param {*} time
* @return {*}
*/
const render = (time) => {
time = parseFormat('HH:mm:ss:SSS', parseTime(time))
document.querySelector("#status").innerHTML = time
}
const useCountUp = () {
let rafId;
let endTime;
const step = (timestamp) => {
console.log('timestamp', timestamp)
// render(timestamp)
rafId = window.requestAnimationFrame(step)
}
const start = () {
rafId = window.requestAnimationFrame(step)
}
return {
start,
}
}
const { start } = useCountUp();
document.querySelector('.start').addEventListener('click', () => {
start()
})
</script>
</body>
</html>
效果如下：
簡易版
又看到了我們熟悉的時間格式啦， 格式化的方法也是來源于vant的CutDown組件中的格式化代碼！
格式化雖然是完成了，但是怎么去停止呢？能不能支持暫停、繼續(xù)、重置呢？
接下來繼續(xù)完善。
進階版
我們直接通過 window.cancelAnimationFrame() 去取消回調(diào)函數(shù)即可！在 useCountUp函數(shù)中添加一下 pause 即可！
const pause = () {
if (rafId) {
window.cancelAnimationFrame(rafId)
}
}效果如下：
進階版
不少的小伙伴已經(jīng)發(fā)現(xiàn)，停止雖然是沒問題了，當再次點擊開始的時候，時間怎么不對了？有瑕疵！
因為我們少算補時時間，做如下修改，添加startTime 、 stopTime 和 goOn 方法:
const useCountUp = () {
let rafId;
let startTime;
let stopTime;
const step = (timestamp) => {
console.log('timestamp', timestamp)
render(timestamp - startTime)
rafId = window.requestAnimationFrame(step)
}
const start = () {
startTime = performance.now()
rafId = window.requestAnimationFrame(step)
}
const pause = () {
stopTime = performance.now()
if (rafId) {
window.cancelAnimationFrame(rafId)
}
}
const goOn = () {
startTime += performance.now() - stopTime
rafId = window.requestAnimationFrame(step)
}
return {
start,
pause,
goOn
}
}這里基本上已經(jīng)完成了暫停和繼續(xù)的功能了，但是仍是有些bug的，可以多次點擊繼續(xù)試試?? 。
完整版
接下來，我們來修復上述的bug，方法：添加一個變量來表示當前計時器的狀態(tài)。
在增加幾個新功能：
- 添加 重置 方法： 其實我們只需要調(diào)用一下暫停，在清理一下時間即可
- 支持 配置：比如 正香計時的時間， 計時結(jié)束的函數(shù)
核心代碼如下，其他部分代碼不變：
const useCountUp = (options) => {
let rafId, startTime, stopTime, curentTime, counting = false
const step = (timestamp) => {
curentTime = timestamp - startTime
render(curentTime)
options.onChange?.(curentTime);
if (options.time) {
if (Math.floor(curentTime) < options.time) {
rafId = window.requestAnimationFrame(step)
} else {
pause()
options.onFinish?.()
}
} else {
rafId = window.requestAnimationFrame(step)
}
}
const start = () {
// 計時中 或者 已經(jīng)開始過計時想要重新開始計時，應該先點擊一下 重置 再開始計時
if (counting || curentTime) {
return
}
counting = true
startTime = performance.now()
rafId = window.requestAnimationFrame(step)
}
const pause = () {
// 已經(jīng)暫停后，屏蔽掉點擊
if (!counting) {
return
}
counting = false
stopTime = performance.now()
if (rafId) {
window.cancelAnimationFrame(rafId)
}
}
const goOn = () {
// 已經(jīng)在計時中，屏蔽掉點擊
if (counting) {
return
}
counting = true
startTime += performance.now() - stopTime
rafId = window.requestAnimationFrame(step)
}
const reset = () {
pause()
curentTime = 0
startTime = 0
stopTime = 0
render(0)
}
return {
start,
pause,
goOn,
reset
}
}
const { start, pause, goOn, reset } = useCountUp({
time: 3 * 1000,
onChange: current console.log('change', current),
onFinish: () console.log('finish'),
});
document.querySelector('.start').addEventListener('click', () => {
start()
})
document.querySelector('.pause').addEventListener('click', () => {
pause()
})
document.querySelector('.goOn').addEventListener('click', () => {
goOn()
})
document.querySelector('.reset').addEventListener('click', () => {
reset()
})到此基本上就是實現(xiàn)了一個毫秒級的正向計時器！
vue版
只是對js的邏輯進行了一些封裝
代碼：https://github.com/SuYxh/timer-demo
預覽：https://suyxh.github.io/timer-demo/
總結(jié)
正向毫秒級計時器主要就是利用了window.requestAnimationFrame的回調(diào)函數(shù)的參數(shù)為DOMHighResTimeStamp，且與performance.now()的返回值相同；在實現(xiàn)暫停、繼續(xù)時，需要計算一下補時時間。
