jQuery - replacing basic setTimeout with something more flexible

Question

Ages ago, when I first starting building my page (for systems monitoring),I added:

<script language="javascript" type="text/javascript">setTimeout("location.reload();",60000);</script>

to make the page reload every 60 seconds.

It has worked really well up until now. But it [the page] has grown with more PHP and greater use of JQuery etc).

I am now looking for a way to pause the setTimeout / then resume it later on.

I have some jQuery that, when an element is rightclicked, it loads some data, and displays a small table with that result. But I want it so that when that table is being displayed, the page doesn't refresh. When the page is then hidden again, the setTimeout resumes.

What would be the best way to do this? (n.b. the 60000 is currently set in PHP from a configuration variable).

Looks like an awful design, but I'm assuming it's just for your own use. To stop the timeout, just clear it with clearTimeout, and then restart it whenever. As a sidenote there is a metatag (meta refresh) that does this same awful thing. — adeneo, Nov 01 '13 at 14:28
This answer seems like exactly what you're looking for: http://stackoverflow.com/a/3969760/191226 — Bill Criswell, Nov 01 '13 at 14:29
Duplicate of [javascript: pause setTimeout();](http://stackoverflow.com/questions/3969475/javascript-pause-settimeout) — CodingIntrigue, Nov 01 '13 at 14:35

score 1 · Accepted Answer · answered Nov 01 '13 at 14:31

1

You shouldn't use string to call a function inside setTimeout - it's as bad as using eval(). Instead you can do this:

var 
timeout = null,
start = function () {
    timeout = setTimeout(function () { location.reload(); }, 60000);
},
stop = function () {
    if (timeout) clearTimeout(timeout);
};

start();

// and, on button click, call:
stop();

answered Nov 01 '13 at 14:31

Dziad Borowy

12,368
4
41
53

1

Cheers for that, it's actually a lot simpler than I was trying to make it. – IGGt Nov 01 '13 at 14:57

Entity Black · Answer 2 · 2013-11-01T15:09:12.077

EDIT

Ok I did some update of dumb things I made here and now it is working. Also I added console.log for debuging, so you can see time that you are wasting with this post :]

var pageReloader = function () {

    var timeout = null,
        startTime = 0,
        remainingTime = 0,
        delay = 60;

    return {
        start: function () {
            startTime = (new Date()).getTime();
            remainingTime = delay * 1000;
            timeout = setTimeout(function () {
                location.reload();
            }, delay * 1000);

        },

        stop: function () {
            if (timeout) clearTimeout(timeout);
        },

        pause: function () {
            if (timeout) {
                clearTimeout(timeout);
                remainingTime = (remainingTime) - ((new Date()).getTime() - startTime);
                console.log(remainingTime); // DEBUG
            }
        },

        unpause: function () {
            if (timeout) {
                startTime = (new Date()).getTime();
                timeout = setTimeout(function () {
                    location.reload();
                }, remainingTime);
            }
        }
    };

}();

pageReloader.start();
pageReloader.pause();
pageReloader.unpause();

jQuery - replacing basic setTimeout with something more flexible

2 Answers2