ストップウォッチsetInterval, setTimeout



突然、私は繰り返しの勉強に少し飽きました.
エンターテイメント(?)Roreact-地元の人につけて食べる過程で...
ストップウォッチとタイマーを実装する過程で
知っていることや問題に直面したとき、解決過程を残したいと思っています.

同じコードで異なる環境での異なる結果



reactとreact-nativeをそれぞれ用いて全く同じコードを記述した.
では、timeとdateが互いにどのようなsetIntervalを持っているかを見てみましょう.
timeStarted.current = setInterval(() => setTime(v => ++v), 10);
timeの方法は10ミリ秒ごとにdelayがstateを更新することです
const startedTime = Date.now();
dateStarted.current = setInterval(
	() =>  setDate(Date.now() - startedTime), 10, 
);
dateのやり方は簡単に言えます
(setIntervalで更新された時刻)-(ボタンを押した時刻)
つまり、これは時間差を利用した記録です.
(Date.now()新しいDate()オブジェクトの結果値はgetTime()と同じです)
もちろん、これは私が考えたことではありません.Realt-Nativeでtime方式を適用したとき、私はかなり慌てていました.グーグルを通じて、6年6ヶ月前のstackoverflow回答を通じて行うことができました.
同じ遅延のsetIntervalでStateを設定している以上、なぜ他の環境でこのような深刻な違いが発生するのでしょうか.
settimeoutとsetInterval...(ko.javascript)
上の内容を読む
ネストsettimeoutを使用すると、遅延間隔が確保されますが、setIntervalは遅延間隔を保証しません.
この記事ではsetInervalのスケジューリングについて説明します.

delayを100 msに設定したsetIntervalは、コールバック関数の実行時間を考慮していないようです.
どういう意味ですか.
setInervalは、図に示すように、コールバック関数の終了時の残りの遅延によって間隔を取得します.
もし.func(1)という関数が100ミリ秒より長いと仮定します.
もしそうであれば、関数の終了時に100ミリ秒の遅延内に
単一スレッドのjavascriptは、関数の実行中に100ミリ秒ごとに関数を自動的に再実行しますか?
もちろんそうはいかないので、一番上のgifイメージのように、10秒で2倍の差が見られます.
だからDatenow()方式を用い,1ミリ秒精度のように見えるストップウォッチ方式を用いた.
遅延は10だけどDatenow()が返す単位は1 msです.

上のように、1ミリ秒の精度があるように見えます!
その他参考にすると
反フックの巨大な氷山
フックサブコンポーネントの翻訳/応答でsetIntervalを使用するときに発生する問題