為什么setInterval()在Firefox中的行為不同

我不得不使用 vanila JS 為旋轉設定影片，并遇到了 Firefox 的問題。我曾經setInterval()為每個影片步驟設定影片，然后clearInteval()停止影片。在這個例子中，我影片了一個元素的旋轉。它在 Chrome 中運行良好，但在 Firefox 中并沒有完全完成影片，好像 Firefox 需要更長的時間來處理每個步驟。我創建了一個示例，演示了這種行為。

const circle = document.getElementById('circle')
const angle = document.getElementById('angle')
const degToMove = 90 //rotate 90 degrees
const animStepLength = 10 // 10ms is one animation step
const animLength = 300 //whole animation length -> 30 animation steps -> 3deg rotation per step

const rotateCircle = () => {

  rotInterval = setInterval(()=>{

  //what rotation value currently is
    let currentVal = circle.style.transform.match(/[- ]?\d /); 

    //add 3 deg rotation per step to it
    circle.style.transform = `rotate(${ currentVal[0]   (degToMove*animStepLength) / animLength}deg)` 

    //text output
    angle.innerHTML = `${ currentVal[0]   (degToMove*animStepLength) / animLength} deg`

  }, animStepLength)

  setTimeout(() => {

  //after all steps are done clear the interval
    clearInterval(rotInterval) 

  }, animLength);
}

circle.addEventListener('click', rotateCircle) 

body{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100vh;
  font-family: sans-serif;
}

#circle{
  border-radius: 50%;
  background-color: skyblue;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

<div id="circle" style='transform: rotate(0deg)'>
  <span>
    Click to rotate
  </span>
  <span id="angle">0 deg</span>
</div>

也可用作jsfiddle

而 Chrome 旋轉到 90 -> 180 -> 270 -> 360 ... Firefox 轉到 57 -> 114 -> 171 -> 228 -> ... 在這個特定的例子中。好吧，這基本上是 1 rad 增加，但它必須與 和 的選定值animLength有關animStepLength。如果我以不同的方式選擇它們，Firefox 會顯示不同的值。

The simple CSS animation would work here but there are reasons for me to use JS here.

uj5u.com熱心網友回復：

你永遠不能保證當你要求它時會呼叫一個setTimeout或處理程式。setInterval您應該始終將當前時間與初始時間進行比較，以確定您的影片應該顯示什么樣的進度，通常是通過確定影片已經過去的百分比。在下面的示例中查找elapsedPercentage變數。

setInterval由于這個原因，使用被認為是不好的做法。建議的影片方法是使用嵌套requestAnimationFrame；

下面的腳本可以進行很多改進，但它確實向您展示了如何根據影片開始后的時間來正確更新影片。

const circle = document.getElementById('circle');
const angle = document.getElementById('angle');
const degToMove = 90; //rotate 90 degrees
 

let rotationStartTime = null;
let targetRotation = 0;
let rotationStart = 0
let animationTime = 3000;

function startRotating() {

   rotationStartTime = new Date().getTime();
   rotationStart = parseInt(circle.style.transform.match(/[- ]?\d /)[0]);
   targetRotation  = degToMove;
   rotateCircle();
}

function rotateCircle() {
    const currentVal = parseInt(circle.style.transform.match(/[- ]?\d /)[0]);
    const currentTime = new Date().getTime();
    const elapsedPercentage = (currentTime - rotationStartTime) / animationTime;
    let newVal = Math.min(targetRotation, Math.round(rotationStart   (elapsedPercentage * degToMove)));
    circle.style.transform = `rotate(${newVal}deg)`; 

    //text output
    angle.innerHTML = `${newVal} deg`;
    if (newVal < targetRotation) {
        window.requestAnimationFrame(rotateCircle);
    }

}

circle.addEventListener('click', startRotating)

body{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100vh;
  font-family: sans-serif;
}

#circle{
  border-radius: 50%;
  background-color: skyblue;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

<div id="circle" style='transform: rotate(0deg)'>
  <span>
    Click to rotate
  </span>
  <span id="angle">0 deg</span>
</div>

標籤：javascript animation firefox setinterval

上一篇：如何在當前位置開始另一個影片？

下一篇：如何停止影片回圈，但不能在Phaser3中停止影片？