Javascript countdown timer that stops when window is not in focus

Question

Ok , I'm having trouble to solve this , I'm a php / C# web developer , and have no experience or knowledge in Javascript, I have to do just this one thing that needs Javascript:

When a certain page loads, a counter starts. The client must stay on this page for 20 seconds. after, I want to execute php code.

So there are 2 issues concerning me, first: how do I stop the counter, if client leaves the page (meaning the page is not in focus).

2) How can I execute php in javascript? , or call a php function from Javascript.

The code I have so far is this:

<html>
<head>
</head>

<body>
<div id='timer'>
<script type="text/javascript">

COUNTER_START = 20

function tick () {
    if (document.getElementById ('counter').firstChild.data > 0) {
        document.getElementById ('counter').firstChild.data = document.getElementById ('counter').firstChild.data - 1
        setTimeout ('tick()', 1000)
    } else {
        document.getElementById ('counter').firstChild.data = 'done'
    }
}

if (document.getElementById) onload = function () {
    var t = document.createTextNode (COUNTER_START)
    var p = document.createElement ('P')
    p.appendChild (t)
    p.setAttribute ('id', 'counter')

    var body = document.getElementsByTagName ('BODY')[0]
    var firstChild = body.getElementsByTagName ('*')[0]

    body.insertBefore (p, firstChild)
    tick()
}

</script>
</div>
</body>
</html>

and I also want the timer to start ticking when the client gets back on page

Thank you very much for ur help in advance

score 5 · Accepted Answer · edited May 23 '17 at 12:18

5

You could do this using jQuery.
Recycling an old Stackoverflow post, try this:

var window_focus;
var counter = 1000;

// on focus, set window_focus = true.
$(window).focus(function() {
    window_focus = true;
});

// when the window loses focus, set window_focus to false
$(window).focusout(function() {
    window_focus = false;
});

// this is set to the ('click' function, but you could start the interval/timer in a jQuery.ready function: http://api.jquery.com/ready/
$(document).one('click',function() {
    // Run this function every second. Decrement counter if window_focus is true.
    setInterval(function() {
        $('body').append('Count: ' + counter + '<br>');
        if(window_focus) { counter = counter-1; }
    }, 1000);
});

Demo and old post
DEMO | Old So post

Update
Probably because the demo runs in 4 iframes, the $(window).focus bit only works on the iframe actually running the code (the bottom-right window).

jQuery
jQuery.com (How jQuery works) | Example (back to basics halfway down the page) | If you use the 2nd link, also read this

edited May 23 '17 at 12:18

Community

1
1

answered Sep 21 '12 at 19:07

Terry Seidler

2,043
15
28

This is probably too much of an aside, but before I started putting timer code in various places on my page(s), I'd think long and hard about writing a custom Javascript Timer object that accepts a callback on each tick and on expiration, and exposes something like a Start, Stop, and Pause method...long term, would probably be a lot simpler to use. Just $0.02. – David W Sep 21 '12 at 19:13
True - that does seem like a sensible thing to do. I'm not sure I'd want to use javascript to check whether someone spent at least 20 seconds on my page at all.. Some users will have disabled javascript completely. – Terry Seidler Sep 21 '12 at 19:15
Agree - that's one of those kinds of things that can get really hairy really fast :) – David W Sep 21 '12 at 19:17
Umm, and how do I use jQuery? – Shady Sep 21 '12 at 19:17
Oh - all you have to do is 'include' the jquery.js file. Have a look at this page (specifically `back to basics`). jQuery is a very useful library if you're doing a lot of javascript stuff. (http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/) – Terry Seidler Sep 21 '12 at 19:20
oh I see , that's what I was missing lol , I found many codes that I tried to use, but failed, didn't know I have to include the Jquery Library – Shady Sep 21 '12 at 19:28
Now it is time to ask the opposite: is there anyway to trick the page in believing that the browser window is focused and keep the timer going while donig something else? – Oiproks Jun 10 '19 at 08:28

score 1 · Answer 2 · edited May 23 '17 at 10:25

In regards to your first question about detecting if the window is out of focus, see this answer: Is there a way to detect if a browser window is not currently active?

It is possible, but only very new browsers support this so it may not be useful based on current browser support.

To trigger PHP code from Javascript, you would have to make an AJAX call to a server-side PHP script to invoke PHP since JS is client-side and PHP is server-side.

Javascript countdown timer that stops when window is not in focus

2 Answers2

Linked

Related