setInterval（）是否被清除？

Question

當用戶將焦點切換到另一個瀏覽器選項卡時，我嘗試使用頁面可見性api暫停畫布動畫：

var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") { // Opera 12.10 & Firefox 18 & later support
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} 

function drawStuff () {
  //draws & rotates stuff on canvas
}
function handleVisibilityChange() {
  if (document[hidden]) {
    clearInterval(drawPic);
  } else {
    var drawPic = setInterval(drawStuff, 60);
  }
}

handleVisibilityChange();
document.addEventListener("visibilitychange", handleVisibilityChange, false);

我希望動畫能夠從停下的位置繼續恢復，但是由於某種原因，每次我離開選項卡並返回到頁面時，setInterval不會清除，並且繪圖會像調用了多個setIntervals一樣加速在上面。 如果離開並多次返回到選項卡，則動畫會加快到荒謬的比例。

這里發生了什么？ 為什么在handleVisibilityChange函數中不清除間隔？

編輯：移動var聲明將其修復，謝謝。

編輯2：在文檔代碼中添加了[隱藏]以供將來參考（如Suing＆Tushar所提到的）。

Answer 1

更新評論中。

我犯了一個錯誤， requestAnimationFrame不會使計算機本身保持喚醒狀態。 但是，如果您正在播放視頻，則可以使用requestAnimationFrame觀看視頻。 雖然是使計算機無法喚醒的視頻。

同樣，術語“ 焦點 ”可能也不正確，盡管建議僅在“ 可見 ”不正確時更新，因為當您在窗口上放置另一個窗口時會不斷觸發，如果該窗口最大化或滾動顯示動畫不可見。 requestAnimationFrame也不必顯示任何內容，並且調用不知道您在回調主體中所做的事情，您可能只是在計數幀。

現在，我將使用“ 頁面焦點 ”一詞，這意味着該頁面是瀏覽器窗口的顯示選項卡，它不必具有系統焦點即可觸發，盡管如果有人有更准確的描述的話。

使用window.requestAnimationFrame(functionName); 當您失去頁面焦點時它將停止調用，然后在您重新獲得頁面焦點時將再次啟動。 提供瀏覽器支持的最大可見幀速率（1/60秒間隔），並與瀏覽器的布局和渲染器同步動畫。

有關如何使用和兼容性的詳細信息，請參見MDN requestAnimationFrame 。

Answer 2

試試這個：移動“ var drawPic;” 函數外的聲明。 （為了完整性起見）還包括其他代碼（如果將來有人需要測試）。

// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

function drawStuff () {
  //draws & rotates stuff on canvas
}

var drawPic;

function handleVisibilityChange() {
  if (document[hidden]) {
    clearInterval(drawPic);
  } else {
    drawPic = setInterval(drawStuff, 60);
  }
}

handleVisibilityChange();

// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || 
  typeof document[hidden] === "undefined") {
  alert("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
  // Handle page visibility change   
  document.addEventListener(visibilityChange, handleVisibilityChange, false);

}