Приостановка анимации 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/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API Работает в IE 10+, 18+ Firefox и Chrome 33+ (в зависимости от источника). Вам придется изменить animation = !document.hidden; самостоятельно, так как вы были немного расплывчаты по этой теме, но это должно дать вам представление.