字節(jié)面試官問粉絲，如何實(shí)現(xiàn)準(zhǔn)時的setTimeout
最近一個粉絲去面字節(jié)，被面試官問到了這個問題來問我，一聽感覺有點(diǎn)意思，于是對它進(jìn)行了一番研究，可能研究的過程以及結(jié)果不一定是最好的，但是還是記錄一下，為各位提供一些幫助。
拿到這個問題，假設(shè)有這樣的場景，我們需要用 setTimeout 做一個動畫，并且需要控制他的頻率，50ms 運(yùn)行一次，首先我們先上圖，來看看 setTimeout 的表現(xiàn)。
運(yùn)行代碼如下，通過一個計(jì)數(shù)器來記錄每一次 setTimeout 的調(diào)用，而設(shè)定的間隔 * 計(jì)數(shù)次數(shù)，就等于理想狀態(tài)下的延遲，通過以下例子來查看我們計(jì)時器的準(zhǔn)確性。
function timer() {
var speed = 50, // 設(shè)定間隔
counter = 1, // 計(jì)數(shù)
start = new Date().getTime();
function instance()
{
var ideal = (counter * speed),
real = (new Date().getTime() - start);
counter++;
form.ideal.value = ideal; // 記錄理想值
form.real.value = real; // 記錄真實(shí)值
var diff = (real - ideal);
form.diff.value = diff; // 差值
window.setTimeout(function() { instance(); }, speed);
};
window.setTimeout(function() { instance(); }, speed);
}
timer();
而我們?nèi)绻?setTimeout 還未執(zhí)行期間加入一些額外的代碼邏輯，再來看看這個差值。
...
window.setTimeout(function() { instance(); }, speed);
for(var x=1, i=0; i<10000000; i++) { x *= (i + 1); }
}
...
可以看出，這大大加劇了誤差。
可以看到隨著時間的推移， setTimeout 實(shí)際執(zhí)行的時間和理想的時間差值會越來越大，這就不是我們預(yù)期的樣子。類比真實(shí)的場景，對于一些倒計(jì)時以及動畫來說都會造成時間的偏差都是不理想的。
那么，從這個現(xiàn)象來看一下，為什么 setTimeout 會不準(zhǔn)時呢？
因?yàn)槲覀兊拇a往往并不是只有一個 setTimeout，大多數(shù)會遇到以下情況。
詳細(xì)要從瀏覽器的事件循環(huán)講起，但是講事件循環(huán)的文章太多了，文本就不再累贅地詳細(xì)展開講解。
視頻
https://www.youtube.com/watch?v=8aGhZQkoFbQ
（國內(nèi)視頻 https://www.bilibili.com/video/av456657611/）
建議看國外的中英對照字幕，國內(nèi)的翻譯準(zhǔn)確度一般
相關(guān)文章
https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
極客時間 - 李兵 - 15 | 消息隊(duì)列和事件循環(huán)：頁面是怎么“活”起來的？https://time.geekbang.org/column/article/134456
總結(jié)來說，因?yàn)闉g覽器頁面是有消息隊(duì)列和事件循環(huán)來驅(qū)動的，創(chuàng)建一個 setTimeout 的時候是將它推進(jìn)了一個隊(duì)列，并沒有立即執(zhí)行，只有本輪宏任務(wù)執(zhí)行完，才會去檢查當(dāng)前的消息隊(duì)列是否有有到期的任務(wù)。
接下來我會用 4 這種方式來探索。
while
想得到準(zhǔn)確的，我們第一反應(yīng)就是如果我們能夠主動去觸發(fā)，獲取到最開始的時間，以及不斷去輪詢當(dāng)前時間，如果差值是預(yù)期的時間，那么這個定時器肯定是準(zhǔn)確的，那么用 while 可以實(shí)現(xiàn)這個功能。
理解起來也很簡單：
代碼如下：
function timer(time) {
const startTime = Date.now();
while(true) {
const now = Date.now();
if(now - startTime >= time) {
console.log('誤差', now - startTime - time);
return;
}
}
}
timer(5000);
打印：誤差 0
顯然這樣的方式很精確，但是我們知道 js 是單線程運(yùn)行，使用這樣的方式強(qiáng)行霸占線程會使得頁面進(jìn)入卡死狀態(tài)，這樣的結(jié)果顯然是不合適的。
Web Worker
那么既然無法在當(dāng)前主線程避免這個誤差，我們能否另開一個線程去處理呢？當(dāng)然可以，JavaScript 也提供給我們這樣一個能力，通過 Web Worker 我們就可以在另一個線程來運(yùn)行我們的代碼。
Web Worker為Web內(nèi)容在后臺線程中運(yùn)行腳本提供了一種簡單的方法。線程可以執(zhí)行任務(wù)而不干擾用戶界面。 -- 摘自MDN
一個 worker 的簡單的示例
// main.js
var myWorker = new Worker('worker.js');
// 監(jiān)聽 worker
myWorker.onmessage = function(e) {
result.textContent = e.data;
console.log('Message received from worker');
}
first.onchange = function() {
// 向 worker 發(fā)送數(shù)據(jù)
myWorker.postMessage([first.value,second.value]);
console.log('Message posted to worker');
}
// worker.js
onmessage = function(e) {
// 接受主線程的數(shù)據(jù)
console.log('Message received from main script');
var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
console.log('Posting message back to main script');
// 向主線程發(fā)送數(shù)據(jù)
postMessage(workerResult);
}
那么接下來我們就要加 worker 和 while 相結(jié)合，以下為創(chuàng)建 worker 部分
// worker生成器
const createWorker = (fn, options) => {
const blob = new Blob(['(' + fn.toString() + ')()']);
const url = URL.createObjectURL(blob);
if (options) {
return new Worker(url, options);
}
return new Worker(url);
}
// worker 部分
const worker = createWorker(function () {
onmessage = function (e) {
const date = Date.now();
while (true) {
const now = Date.now();
if(now - date >= e.data) {
postMessage(1);
return;
}
}
}
})
我們通過在 worker 中寫入一個 while 循環(huán)，當(dāng)達(dá)到我們的預(yù)取時間的時候，再向主線程發(fā)送一個完成事件，就不會因?yàn)橹骶€程的其他代碼的干擾而造成數(shù)據(jù)不準(zhǔn)的情況。
let isStart = false;
function timer() {
worker.onmessage = function (e) {
cb()
if (isStart) {
worker.postMessage(speed);
}
}
worker.postMessage(speed);
}
我們來看一下實(shí)際的效果。
我們可以看到執(zhí)行的時間和理想的時間非常相近，而那細(xì)微的差異應(yīng)該就是線程通訊耗時。
我們再來看看加入額外的代碼邏輯的情況。
...
if (isStart) {
worker.postMessage(speed);
}
for (var x = 1, i = 0; i < 10000000; i++) { x *= (i + 1); }
...
時間明顯增加了一些，但是增加速度非常緩慢。
雖然我們用 Web Worker 修復(fù)時間看似被解決了。但是一方面， worker 線程會被 while 給占用，導(dǎo)致無法接受到信息，多個定時器無法同時執(zhí)行，另一方面，由于 onmessage 還是屬于事件循環(huán)內(nèi)，如果主線程有大量阻塞還是會讓時間越差越大，因此這并不是個完美的方案。
requestAnimationFrame
先來看看他的定義
window.requestAnimationFrame()告訴瀏覽器——你希望執(zhí)行一個動畫，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動畫。該方法需要傳入一個回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會在瀏覽器下一次重繪之前執(zhí)行，回調(diào)函數(shù)執(zhí)行次數(shù)通常是每秒60次，也就是每16.7ms 執(zhí)行一次，但是并不一定保證為 16.7 ms。
我們也可以嘗試一下將它來模擬 setTimeout。
// 模擬代碼
function setTimeout2 (cb, delay) {
let startTime = Date.now()
loop()
function loop () {
const now = Date.now()
if (now - startTime >= delay) {
cb();
return;
}
requestAnimationFrame(loop)
}
}
發(fā)現(xiàn)由于 16.7 ms 間隔執(zhí)行，在使用間隔很小的定時器，很容易導(dǎo)致時間的不準(zhǔn)確。
再看看額外代碼的引入效果。
...
window.setInterval2(function () { instance(); }, speed);
}
for (var x = 1, i = 0; i < 10000000; i++) { x *= (i + 1); }
...
略微加劇了誤差的增加，因此這種方案仍然不是一種好的方案。
setTimeout 系統(tǒng)時間補(bǔ)償
這個方案是在 stackoverflow 看到的一個方案，我們來看看此方案和原方案的區(qū)別
原方案
setTimeout系統(tǒng)時間補(bǔ)償
當(dāng)每一次定時器執(zhí)行時后，都去獲取系統(tǒng)的時間來進(jìn)行修正，雖然每次運(yùn)行可能會有誤差，但是通過系統(tǒng)時間對每次運(yùn)行的修復(fù)，能夠讓后面每一次時間都得到一個補(bǔ)償。
function timer() {
var speed = 500,
counter = 1,
start = new Date().getTime();
function instance()
{
var ideal = (counter * speed),
real = (new Date().getTime() - start);
counter++;
var diff = (real - ideal);
form.diff.value = diff;
window.setTimeout(function() { instance(); }, (speed - diff)); // 通過系統(tǒng)時間進(jìn)行修復(fù)
};
window.setTimeout(function() { instance(); }, speed);
}
再來看看加入額外的代碼邏輯的情況。
依舊非常的穩(wěn)定，因此通過系統(tǒng)的時間補(bǔ)償，能夠讓我們的 setTimeout 變得更加準(zhǔn)時，至此我們完成了如何讓 setTimeout 準(zhǔn)時的探索。
好了我們最后來總結(jié)一下4種方案的優(yōu)缺點(diǎn)
| while | Web Worker | requestAnimationFrame | setTimeout 系統(tǒng)時間補(bǔ)償 | |
|---|---|---|---|---|
| 準(zhǔn)確度 | 高 | 高 | 低 | 高 |
| 主線程阻塞 | 阻塞 | 一般 | 不阻塞 | 不阻塞 |
| 評分 | ???? | ?????? | ?? | ?????????? |
我們下期再見~
參考
https://segmentfault.com/q/1010000013909430
https://stackoverflow.com/questions/196027/is-there-a-more-accurate-way-to-create-a-javascript-timer-than-settimeout
小獅子有話說
你好，我是 Chocolate，一個獅子座的前端攻城獅，希望成為優(yōu)秀的前端博主，每周都會更新文章，與你一起變優(yōu)秀~
關(guān)注 小獅子前端，回復(fù)【小獅子】獲取為大家整理好的文章、資源合集我的博客地址： yangchaoyi.vip歡迎收藏，可在博客留言板留下你的足跡，一起交流~覺得文章不錯，【 點(diǎn)贊】【在看】支持一波 ??ヽ(°▽°)ノ?
叮咚~ 可以給小獅子加
星標(biāo)，便于查找。感謝加入小獅子前端，最好的我們最美的遇見，我們下期再見~