在最小化上暂停Javascript动画

Question

我将Chart.js库用于网站上的动画图。 通过阅读有关该主题的其他讨论，浏览器在选项卡处于非活动状态或最小化时会以不同的方式对待SetInterval()代码。

我注意到一个建议，指出当标签重新获得焦点时停止动画并重新启动它应该可以解决此问题。 我不确定如何执行此操作，也无法找到任何代码。 该库具有"animation: true" ，我相信它可以用来停止/启动它，但不确定如何实现它。

setInterval(function()
{
    $.ajax({
        type: "POST",
        url: "<?= $data['baseUrl']; ?>" +  "graphs.json",
        data: { 'action': 'getServerStats' },
        dataType: 'json',
        success: function(data)
        {
            ram = data['result']['RAMUsageMB'];

            // Add two random numbers for each dataset
            ramGraph.addData([ram], '');

            // Remove the first point so we dont just add values forever
            ramGraph.removeData();
        }
    });
}, 1000);

Answer 1

document.addEventListener("visibilitychange", function() {
  animation = ! document.hidden;
}, false);

https://developer.mozilla.org/zh-CN/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API在IE 10以上版本，Firefox 18以上版本和Chrome 33以上版本中有效（根据来源）。 您必须更改animation = !document.hidden; 自己，因为您对此主题有点含糊，但这应该可以给您一个想法。