我正在嘗試為 Libet 任務（心理學家使用的認知任務）制作時鐘。按照慣例，這些時鐘需要 2560 毫秒才能完成一圈。我的似乎運行得慢了很多，我可以弄清楚原因。
我在這里舉了一個問題的例子：https ://jsfiddle.net/Sumoza/re4v7Lcj/8/
在延遲為 1 毫秒的 setInterval 的每次迭代中，我將手的旋轉角度增加 (Math.PI*2)/2560，即以弧度表示的圓的 1/2560。因此，每增加一個 ms 應該在該 ms 內完成回圈。正如您從時鐘中看到的那樣，它的運行速度要慢一些。任何人都可以解釋為什么。有趣的是，*10 看起來更接近我想要的 - 但這對我來說沒有多大意義，所以我對修復持謹慎態度。下面小提琴中的相關JS。謝謝你的幫助。
var time = 0;
var rad_tick = (Math.PI*2)/2560; //radians per tick: last number is ms per revolution
// Draw Clock
const clock = document.getElementById('clock')
const clock_ctx = clock.getContext('2d')
clock_ctx.translate(clock.width/2, clock.height/2);
radius = (clock.height/2) * 0.7;
function drawClock() {
clock_ctx.clearRect(-clock.width/2, -clock.height/2, clock.width, clock.height);
clock.style.backgroundColor = 'transparent';
clock_ctx.beginPath();
clock_ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
clock_ctx.stroke();
}
drawClock();
// Draw Hand
const hand = document.getElementById('hand')
const hand_ctx = hand.getContext('2d')
hand_ctx.translate(hand.width/2, hand.height/2);
function drawHand(time){
hand_ctx.clearRect(-hand.width/2, -hand.height/2, hand.width, hand.height);
hand_ctx.beginPath();
hand_ctx.moveTo(0,0);
hand_ctx.rotate(time);
hand_ctx.lineTo(0, -radius*0.9);
hand_ctx.stroke();
hand_ctx.rotate(-time);
}
function drawTime(){
time =rad_tick;//*10
drawHand(time)
}
var intervalId = setInterval(drawTime, 1);
uj5u.com熱心網友回復：
試試這個
var starttime = new Date().getTime();
function drawTime() {
var elapsed = new Date().getTime() - starttime;
var time = elapsed % 2560;
time = time * rad_tick;
console.log(elapsed "->" time);
drawHand(time)
}
uj5u.com熱心網友回復：
以當前時間為基礎，不要依賴 setInterval 在您設定它觸發的確切時間觸發。如果在 setInterval 應該觸發的時候有一些事情在佇列中，它會首先在佇列中做這些事情，然后才運行你連接到 setIterval 的函式（導致你看到的延遲——這會增加更多隨著時間的推移還有更多）。了解事件回圈和requestAnimationFrame。
取而代之的是，在做某事之前（新鮮）獲取時間，并計算自開始時間以來已經過去了多少時間。將您的影片基于這些計算。這樣，即使有輕微的延遲，您的最后一個操作也將始終將事物同步到它們現在應該看起來的方式。
當你這樣做時，你可能會丟失一些幀（跳過引擎沒有時間做的事情），但它可能會在更接近預期完成時間的時候完成。
底線是，如果你告訴瀏覽器在特定時間內做的比它所能做的更多，就會有延遲。但是，您可以跳過影片的幀，以使事情更接近預期的完成時間。
uj5u.com熱心網友回復：
您要求setInterval每 1 毫秒呼叫一次回呼，但它實際上是每 1 毫秒呼叫一次嗎？
試試這個代碼：
let cnt = 0;
setInterval(() => cnt , 1);
setTimeout(() => { console.log(cnt); }, 1000);
對我來說，它列印了 230 到 235 之間的東西。所以看起來對我來說實際（平均）最小間隔有點超過 4 毫秒。
uj5u.com熱心網友回復：
加上 Stig，由于 javascript 在這些事情上并不是超級快，所以它不會超級準確。使用類似的東西getTime()將允許適當的時間。您如何呼叫getTime您的drawTime函式，以便大約每毫秒，它將檢查實際時間并使用該值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/459666.html
標籤：javascript 动画片 设置间隔 定时 弧度