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：在 document[hidden] 的代码中添加以供将来参考（如 Suing & Tushar 所述）。

Answer 1

试试这个： 移动“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);

}

Answer 2

更新 在少数 cmets 中。

我犯了一个错误，requestAnimationFrame 不会让计算机自行唤醒。如果您正在播放视频并且可以使用requestAnimationFrame 观看视频，它会。虽然是视频让电脑保持清醒。

此外，术语“focus”可能不正确，但有人建议它仅在“visible”不准确时更新，因为它会在您放置时不断触发窗口上方的另一个窗口，如果该窗口最大化，则事件，或者滚动您正在制作动画的内容。 requestAnimationFrame 也不必显示任何内容，并且调用不知道您在回调正文中做了什么，您可能只是在计算帧数。

现在我将使用术语“页面焦点”，意思是页面是浏览器窗口的显示选项卡，它不必具有系统焦点来触发，但如果有人有一个更准确的描述确实说。

使用window.requestAnimationFrame(functionName);，它会在您失去页面焦点时停止调用，然后在您重新获得页面焦点时再次调用。提供浏览器支持的最大可见帧速率（1/60 秒间隔），并将动画与浏览器的布局和渲染器同步。

有关如何使用和兼容性的详细信息，请参阅MDN requestAnimationFrame。