為什么我需要cancelAnimationFrame（）

Question

我不明白為什么API包含cancelAnimationFrame() ，因為我可以通過設置這樣的continue變量來停止動畫：

function draw(timestamp) {
  if (continue == true) { requestAnimationFrame(draw); }
}

那么問題是在什么情況下我應該使用cancelAnimationFrame（）？

Answer 1

首先，一個重要的參考點。 A（注明日期）（候選推薦）規范： http ： //www.w3.org/TR/animation-timing/#definitions

與每個Document相關聯的是動畫幀請求回調列表，它是元組列表。 handle是一個整數^[long] ，用於唯一標識列表中的條目。 callback是一個FrameRequestCallback對象。 最初，Document的動畫幀請求回調列表為空。

另外，請記住，這些規范的目標受眾是用戶代理開發人員。 正是在這些規范的實現中，用戶代理為我們（應用程序開發人員）提供了一個API來與之交互。

請注意上面的每個文檔情緒; 您可以在window或上下文中包含多個文檔。 你可以在一個瀏覽器上下文的多重執行緒 。

那么，這與每篇文檔有何關系？ 好吧，（推薦）規范引用了過程模型 ，它基本上將所有這些列表轉儲到一個空列表中，並對“保留”列表的結果執行回調調用算法 ..但是，這可能不是一個問題作為應用程序開發人員; *我認為 ，作為應用程序開發人員，我們不會在我們自己的window 上下文的多個文檔中及其中跟蹤和維護Document.FrameRequestList實例。 我們只是與API接口，可在window訪問。

現在，讓我們總結一下requestAnimationFrame(<function>)確實有效， 並 返回什么。

調用requestAnimationFrame並提供function作為回調 ，將一個條目 （ <handler,FrameRequestCallback>或<long, "an object, with a cancelled member, that encapsulates your function"> ）添加到動畫幀請求回調列表中 。 requestAnimationFrame返回Handler [long] 。

根據上述規范（ http://www.w3.org/TR/animation-timing/#dom-windowanimationtiming-cancelanimationframe ），

cancelAnimationFrame方法用於取消先前生成的調度動畫幀更新的請求。

可以推斷，通過調用cancelAnimationFrame並提供（可能是先前存儲的） handle作為參數，您可以從動畫幀請求回調列表中 刪除一個條目， 但事實並非如此。

當調用cancelAnimationFrame（handle）時，用戶代理必須將已取消的標志設置為true，以便在其句柄為句柄的此Document上注冊的回調。 設置取消標志是否回調是否在動畫幀請求回調列表中 。 如果給定句柄沒有回調，則此函數不執行任何操作。

因此，您在cancelAnimationFrame中提供的handle不會修改列表。 它將取消的標志設置為true'在回調'..這確實使它無法運行。 這是合理的，因為前面提到的（上面） 處理模型 。

---

因此，對於您的問題（以及關於您的問題的特定評論）跳過添加文檔的動畫幀請求回調列表的條目，使用requestAnimationFrame不會保留現有的scheduled條目（或已取消的現有條目）來自跑步的旗幟是假的。 需要考慮“更大”的上下文和處理模型（包括文檔頁面可見性屬性）。

在您的問題中，有人提到您可能希望取消計划框架請求的特定場景 - 但更好的理由是針對無意的方面和注意事項。

簡而言之，如果您要使用API​​來請求執行回調的幀更新，請使用API​​取消/停止所述更新請求並停止回調。