最小化时暂停Javascript动画

Pausing Javascript animation on minimize

本文关键字：动画 Javascript 暂停 最小化      更新时间：2023-09-26

我在网站上使用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);

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

https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API适用于IE 10+、Firefox 18+和Chrome 33+（根据来源）。你必须自己更改animation = !document.hidden;，因为你在这个主题上有点模糊，但这应该会给你一个想法。

相关文章：