浏览器中的Javascript保存模式

Question

I made a little code in JavaScript which play music on a streaming music website ( tidal, spotify napster etc... ) and change every x seconds. When the last song is listening it loops and plays the first song of the playlist. ( I made this because on tidal.com webmaster didn't implement the functionality to loop the entire playlist ).

I injected my javascript using Greasemonkey and Tampermonkey on firefox and chrome and i got problems when i have 10 tabs opened ( so 10 javascript loop working together ). I'm a beginner so maybe my code is really bad, just tell me.

So the code isn't complicated, i get the DOM element which will allow me to controls songs ( next / pause / first song ), and i .click() on those buttons when my conditions are true. It works when i have ONE tab opened, i can see it is doing its purpose.

But the problem is, when i run it with like 10 or 15 tabs opened, my browser seems to stop my javascript because i'm not on the page. I can see that as soon as i come back on the page the script wake up and works. ( For example sometimes i come back on a page and i can see a song which is at 2:00 while i set in my code to go next when time is 35s.. )

So : Is my code completely buggy or is it the browser ? Chrome/Firefox do the same. And BTW, i tested by injecting directly with the console ( F12 ) and it's the same.

 //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

This occures because browsers tend to slow down intervals in inactive tabs to optimize the performance.

Check out the MDN for setInterval :

Inactive tabs Requires Gecko 5.0(Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)

Starting in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), intervals are clamped to fire no more often than once per second in inactive tabs.