在異步編程中當(dāng)然少不了定時(shí)器了，常見的定時(shí)器函數(shù)有
setTimeout、setInterval、requestAnimationFrame。
- setTimeout
剛開始用
setTimeout時(shí)，通過會(huì)認(rèn)為設(shè)置延時(shí)多久，就應(yīng)該是多久后執(zhí)行。其實(shí)這個(gè)觀點(diǎn)是錯(cuò)誤的，因?yàn)镴S是單線程執(zhí)行的，如果前面的代碼影響了性能，就會(huì)導(dǎo)致setTimeout不會(huì)按期執(zhí)行。這就要求我們不斷去修正，使定時(shí)器相對(duì)準(zhǔn)確。
let period = 60 * 1000 * 60 * 2;
let startTime = new Date().getTime();
let count = 0;
let end = new Date().getTime() + period;
let interval = 1000;
let currentInterval = interval;
function loop() {
count++;
// 代碼執(zhí)行所消耗的時(shí)間
let offset = new Date().getTime() - (startTime + count * interval)
let diff = end - new Date().getTime()
let h = Math.floor(diff / (60 * 1000 * 60))
let hdiff = diff % (60 * 1000 * 60)
let m = Math.floor(hdiff / (60 * 1000))
let mdiff = hdiff % (60 * 1000)
let s = mdiff / 1000
let sCeil = Math.ceil(s)
let sFloor = Math.floor(s)
//得到下一次循環(huán)所消耗的時(shí)間
currentInterval = interval - offset;
console.log(`時(shí)：${h},分：${m},秒：${s},代碼執(zhí)行用時(shí)${offset}ms,下次循環(huán)間隔${currentInterval}`)
setTimeout(loop, currentInterval)
}
setTimeout(loop, currentInterval)
- setInterval
通常來(lái)說不建議使用
setInterval。第一，它和setTimeout一樣，不能保證在預(yù)期的時(shí)間執(zhí)行任務(wù)；第二，它存在執(zhí)行累積的問題。如果定時(shí)器執(zhí)行過程中出現(xiàn)了耗時(shí)操作，多個(gè)回調(diào)函數(shù)會(huì)在耗時(shí)操作結(jié)束后同時(shí)執(zhí)行，從而帶來(lái)性能上的問題。
如果有循環(huán)定時(shí)器的請(qǐng)求，完全可以通過
requestAnimationFrame來(lái)實(shí)現(xiàn)。
function setInterval(callback, interval) {
let timer;
const now = Date.now;
let startTime = now();
let endTime = startTime;
const loop = () => {
timer = window.requestAnimationFrame(loop)
endTime = now()
if (endTime - startTime >= interval) {
startTime = endTime = now()
callback(timer)
}
}
timer = window.requestAnimationFrame(loop)
return timer
}
let a = 0
setInterval(timer => {
console.log('1', 1)
a++
if (a === 3) {
cancelAnimationFrame(timer)
}
}, 1000)
- requestAnimationFrame
計(jì)時(shí)器一直是javascript動(dòng)畫的核心技術(shù)。而編寫動(dòng)畫循環(huán)的關(guān)鍵是要知道延遲時(shí)間多長(zhǎng)合適。一方面，循環(huán)間隔必須足夠短，這樣才能讓不同的動(dòng)畫效果顯得平滑流暢；另一方面，循環(huán)間隔還要足夠長(zhǎng)，這樣才能確保瀏覽器有能力渲染產(chǎn)生的變化
大多數(shù)電腦顯示器的刷新頻率是60Hz，大概相當(dāng)于每秒鐘重繪60次。大多數(shù)瀏覽器都會(huì)對(duì)重繪操作加以限制，不超過顯示器的重繪頻率，因?yàn)榧词钩^那個(gè)頻率用戶體驗(yàn)也不會(huì)有提升。因此，最平滑動(dòng)畫的最佳循環(huán)間隔是1000ms/60，約等于16.6ms
而setTimeout和setInterval的問題是，它們都不精確。它們的內(nèi)在運(yùn)行機(jī)制決定了時(shí)間間隔參數(shù)實(shí)際上只是指定了把動(dòng)畫代碼添加到瀏覽器UI線程隊(duì)列中以等待執(zhí)行的時(shí)間。如果隊(duì)列前面已經(jīng)加入了其他任務(wù)，那動(dòng)畫代碼就要等前面的任務(wù)完成后再執(zhí)行
requestAnimationFrame采用系統(tǒng)時(shí)間間隔，保持最佳繪制效率，不會(huì)因?yàn)殚g隔時(shí)間過短，造成過度繪制，增加開銷；也不會(huì)因?yàn)殚g隔時(shí)間太長(zhǎng)，使用動(dòng)畫卡頓不流暢，讓各種網(wǎng)頁(yè)動(dòng)畫效果能夠有一個(gè)統(tǒng)一的刷新機(jī)制，從而節(jié)省系統(tǒng)資源，提高系統(tǒng)性能，改善視覺效果
requestAnimationFrame自帶函數(shù)節(jié)流功能，基本可以保證在16.6毫秒內(nèi)只執(zhí)行一次（不掉幀的情況下），并且該函數(shù)的延時(shí)效果是精確的，沒有其他定時(shí)器時(shí)間不準(zhǔn)的問題，同樣可以通過該函數(shù)實(shí)現(xiàn)setTime。
- 總結(jié)
requestAnimationFrame會(huì)把每一幀中的所有DOM操作集中起來(lái)，在一次重繪或回流中就完成，并且重繪或回流的時(shí)間間隔緊緊跟隨瀏覽器的刷新頻率
在隱藏或不可見的元素中，requestAnimationFrame將不會(huì)進(jìn)行重繪或回流，這當(dāng)然就意味著更少的CPU、GPU和內(nèi)存使用量
requestAnimationFrame是由瀏覽器專門為動(dòng)畫提供的API，在運(yùn)行時(shí)瀏覽器會(huì)自動(dòng)優(yōu)化方法的調(diào)用，并且如果頁(yè)面不是激活狀態(tài)下的話，動(dòng)畫會(huì)自動(dòng)暫停，有效節(jié)省了CPU開銷。
