Режим сохранения Javascript в браузерах

Question

Я сделал небольшой код на JavaScript, который воспроизводит музыку на веб-сайте потоковой музыки (tidal, spotify napster и т. Д.) И меняется каждые x секунд. Когда последняя песня прослушивается, она зацикливается и воспроизводит первую песню в списке воспроизведения. (Я сделал это, потому что на tidal.com веб-мастер не реализовал функциональность для зацикливания всего плейлиста).

Я ввел свой javascript, используя Greasemonkey и Tampermonkey на firefox и chrome, и у меня возникли проблемы, когда у меня открыто 10 вкладок (так что цикл 10 javascript работает вместе). Я новичок, так что, возможно, мой код действительно плохой, просто скажите мне.

Так что код не сложен, я получаю элемент DOM, который позволит мне управлять песнями (следующая / пауза / первая песня), и я.click() на этих кнопках, когда мои условия выполняются. Он работает, когда у меня открыта ОДНА вкладка, и я вижу, что он выполняет свою функцию.

Но проблема в том, что когда я запускаю его с 10 или 15 открытыми вкладками, мой браузер, кажется, останавливает мой javascript, потому что меня нет на странице. Я вижу, что как только я возвращаюсь на страницу, сценарий просыпается и работает. (Например, иногда я возвращаюсь на страницу и вижу песню, которая находится в 2:00, в то время как я устанавливаю в своем коде следующий код, когда время составляет 35 с..)

Итак: мой код полностью глючит или это браузер? Chrome/Firefox делают то же самое. И кстати, я проверял, вводя непосредственно с консоли ( F12), и это то же самое.

//First track of the playlist
var firstTrack;

//Next button
var next;
//current time
var time; 
var lastTrackPlaying; //null if we are not on the last track

var paused; //null if we are playing


function initVar() {

 firstTrack = document.querySelector("button[title='Lire']");
 next = document.getElementsByClassName("play-controls__next js-next")[0];
  
  setInterval(checkTime,5000); //every 5sec, call checkTime
  
}
 

function checkTime() {
 time = document.getElementsByClassName("js-progress")[0].innerHTML; 
 time = 60*Number(time[0]) + Number( time[2] + time[3]); //convert the time to int format
 lastTrackPlaying = document.querySelector("tr[class='js-tracklist__row ui-draggable ui-draggable-handle is-active is-playing'][data-track-id='86656183']");
 paused = document.getElementsByClassName("play-controls__main-button js-main-button play-controls__main-button--paused")[0];

 if( (lastTrackPlaying != null) && ( time >= 35  ) ) firstTrack.click(); //we are on last song, play first

 else if (  time >= 35 ) next.click(); //next song if 35 sec spent

 else if ( paused != null) firstTrack.click(); //if the playlist is paused, play the first song

}



setTimeout(initVar, 5000); //start the code with 5sec delay ( the website load )

Answer 1

Это происходит потому, что браузеры имеют тенденцию замедлять интервалы на неактивных вкладках для оптимизации производительности.

Проверьте MDN для setInterval:

Неактивные вкладки Требуется Gecko 5.0(Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)

Начиная с Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), интервалы фиксируются для срабатывания не чаще одного раза в секунду в неактивных вкладках.