為什么requestAnimFrame被調用2次？

Question

我正在跟着這本書學習html5 canvas動畫，我想知道這段代碼：

// shim layer with setTimeout fallback 
window.requestAnimFrame = (function(){ 
  return  window.requestAnimationFrame       ||  
          window.webkitRequestAnimationFrame ||  
          window.mozRequestAnimationFrame    ||  
          window.oRequestAnimationFrame      ||  
          window.msRequestAnimationFrame     ||  
          function( callback ){ 
            window.setTimeout(callback, 1000 / 60); 
          }; 
})();

var x = 0; 
function drawIt() { 
    window.requestAnimFrame(drawIt); 
    var canvas = document.getElementById('canvas'); 
    var c = canvas.getContext('2d'); 
    c.fillStyle = "red"; 
    c.fillRect(x,100,200,100); 
    x+=5; 
} 
window.requestAnimFrame(drawIt);

為什么在drawIt函數的內部和外部都調用window.requestAnimFrame(drawIt) ？

Answer 1

要詳細說明評論中已經提到的內容（以及一些其他提示）-

requestAnimationFrame對作為參數傳入的函數requestAnimationFrame單個異步調用。 這意味着需要連續調用該方法以創建動畫循環。

調用調用以更新下一幀的邏輯位置是在循環本身內部。 但是，循環只是一個函數，還需要調用它，因此需要初始調用來“啟動”循環。 （因此，考慮一種打破循環的機制也是明智的）。

另一種技術可能是使用自調用。 在這種情況下，代碼將如下所示，而無需初始調用：

(function drawIt() { 
    window.requestAnimFrame(drawIt); 
    var canvas = document.getElementById('canvas'); 
    var c = canvas.getContext('2d'); 
    c.fillStyle = "red"; 
    c.fillRect(x,100,200,100); 
    x+=5; 
})();

對第一對括號內的函數進行求值，而第二對括號內的函數將調用對所求值的任何調用，即。 功能。 如果選擇此選項，或者原始設置或多或少是個人喜好問題（第一幀直到下一個可用的第一台顯示器都將刷新，否則第一幀就不會更新，這樣您就不會出現任何手動更新的故障）。

值得一提的另一件事是：通常不會在循環內完成對畫布和上下文的引用，因為它們是相對昂貴的操作。 嘗試始終在循環外獲取那些，並且一次：

var canvas = document.getElementById('canvas'); 
var c = canvas.getContext('2d'); 

(function drawIt() { 
    window.requestAnimFrame(drawIt); 
    c.fillStyle = "red";       // also a potential candidate for optimizing
    c.fillRect(x,100,200,100); 
    x+=5; 
})();

如果您只設置一次顏色，那么它也可以移到循環外（即fillStyle ， strokeStyle等）。 這些在動畫方面也很昂貴。