how to: get javascript to run when browser tab is changed?

Question

I started with javaScript a few days ago please keep that in mind.

How do one make a javaScript keep running if I change the browser tab? I have tried some google stuff but none of it made it work. Any one got any ideas that I could tried? I would be grateful if you could post and example with my code.

    setIntervalFunction(){
    secTot += sec/100;
}, 10);

So you want code to continue running even after you swap tabs? That should happen by default. Could you please try and describe your question / what problem your having, better ? — Nunners, Dec 13 '13 at 12:14
you meant `setInterval(function() { secTot += sec / 100; }, 10);`. The code runs even when the tab is not active but its priority is way lower which may cause a bigger interval than intended. Use `Date` to improve your accuracy — Adassko, Dec 13 '13 at 12:15
To add to Adassko's statement, you can set a onfocus event for the window (tab) as well, and have it recalculate it's starting value. Definitely not something you would want to make integral to your business logic, but you probably shouldn't rely on client side code in your business logic anyways. — Jim Yarbro, Dec 13 '13 at 12:17
I just want my javascript to keep running even if I swap tabs but if it should happen by default i have no idea. I am using 000webhost and just trying to make a "click idle game for a school assignment" the problem is that it is not happening by default -edit: i am using Chrome — KevinHaugen, Dec 13 '13 at 12:18
to add i am new to javaScript w3school.com is at big help but some times the examples there don´t help me could you give me an example with the `Date` ? — KevinHaugen, Dec 13 '13 at 12:22
There's absolutely no need to make the game run while nobody sees it, you only need to act like it did run when user returns. — GameAlchemist, Dec 13 '13 at 12:37
What the OP means is that when a tab loses focus usually interval calls are reduced to like 1 or 2 seconds, so his code will not be called every 10 milliseconds. You can't do anything about this. And yes, you can totally use Date for what you are doing, there's no need to keep track of time. — Philipp Gayret, Dec 13 '13 at 12:38
if I did `}, 1000 / 30):`it was 1+ every 20 sec if I did `}, 1000 / 10):`it was 1+ every 10 sec any tips on the 1000 / 10 to get it faster? — KevinHaugen, Dec 13 '13 at 12:57
Found out how to "use" the `Date` swapped my code into this http://jsfiddle.net/7f6DX/31/ now just some time learning it allot better. — KevinHaugen, Dec 13 '13 at 13:11

score 1 · Accepted Answer · edited May 23 '17 at 11:56

This looks to be a duplicate of Chrome: timeouts/interval suspended in background tabs?

If still relevant, this is a feature (?) of chrome, and a possible solution has already been described here How can I make setInterval also work when a tab is inactive in Chrome?

If you are using setTimeout or setInterval Chrome will slow them down and they will cease to fire as you'd expect. The proposed way around this is to basically write your own clock.

UPDATE

The examples in the other solution were a little more complex than they needed to be for this solution. To simplify the previous answer, you can use a HTML5 Web Worker to accomplish this. Here is a simple counter example taken from http://www.w3schools.com/html/html5_webworkers.asp (with minor editing):

page.html

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker()
{
    if(typeof(Worker) !== "undefined")
    {
        if(typeof(w) == "undefined")
        {
            w = new Worker("worker.js");
        }

        w.onmessage = function (event) {
            document.getElementById("result").innerHTML = event.data;
        };
    }
    else
    {
        document.getElementById("result").innerHTML = "Unsupported!";
    }
}

function stopWorker()
{ 
    w.terminate();
}
</script>

</body>
</html>

worker.js

var i=0;

function timedCount()
{
    i += 1;
    postMessage(i);
    setTimeout("timedCount()", 1000);
}

timedCount();

This should get you going.

ok i did this to my code `setInterval(function() { secTot += sec/100; displaySecTot.innerHTML = Math.round(SecTot); displaySecTot1.innerHTML = Math.round(SecTot); }, 1000 / 10);` goes +1 every 10-11 sec.. but helped if you got a way to get it faster i would appreciate it. but thanks :D and i have no idea how the Date work but il use some time to sett my self inn it — KevinHaugen, Dec 13 '13 at 12:52
i found this javascript using `date` jsfiddle.net/7f6DX/31 and it is working but i will trie your script the sec i get the chance, not on my working station any more : / and use the one working the best :DD thanks allot! — KevinHaugen, Dec 13 '13 at 13:22

how to: get javascript to run when browser tab is changed?

1 Answers1