How can I pause an entire script, then continuing the script

What I have is many scripts that has several thousand calls to the setTimeout() function that basically draws animated lines on a canvas. It works beautifully on a computer (of course), and also on mobile devices if the user doesn't touch anything. That being the case I added an touchstart event listener, that will start the entire animation over (they are all about 30 to 40 seconds long) when anything is touched. Works well once again. Issue being is that almost everyone has there mobile devices screen dim then shut off before the animation is complete, and of course when you see the screen dim you touch the screen to prevent it from shutting off, hence the animation starts over !!

I have fooled around with clearTimeout() function, the best I can do is clear all the calls to it at once, then start it over again. This is what I have noticed, I sometimes throw an alert(whatever) in the code to debug it and I have noticed that when the box pops up on a mobile device it actually pauses the entire javascript INCLUDING all thousands of the setTimeout calls, then when you press ok on the alert box, the script continues on its merry way exactly from where it stopped. That's what I want.

Question is, is there global script pause function that will SIMULATE an alert box that will pause the entire script on a touch (allowing a user to say scroll the page or fill in a text box or whatever) then continue on from where it left off ?

Just adding a complaint here: Why would scrolling a page on a mobile device or zooming or simply clicking a text box which brings up the keyboard affect in anyway the timing in the setTimeout() function, it is all loaded into memory from the get go, time is absolute, it keeps going and going, makes no sense.

Thank you for reading.

2 answers

  • answered 2017-12-06 01:46 Raymond

    Confusing man, lots to read. And still confused, I think you need something that constantly checks if it needs to throw alert, or if you throw alert. Pause something until alert is gone.

    You would use a loop function, that only runs when alert = false, or sleep = false.

    var sleep = false;
    function main() {
         if (!sleep) {
            // We run the script
            // Throw alert
            // Sleep now = true, because we threw alert
           sleep = true;
        } else if (sleep == true) {
            // Pause
            // Re-run when sleep is not false;
        } else {


    while (!sleep) {
      // do stuff
      sleep = true;

  • answered 2017-12-06 03:16 McMurphy

    The "Global Pause" will happen automatically on all browsers (bar Firefox) when/if the screen goes to sleep. (I believe Firefox behaviour is a bug and sort of permanent wake lock)

    You can detect if visibility has changed with: -

        document.addEventListener("visibilitychange", visibilityChange);

    This won't help on the initial dim but I suggest that you touch event simply ask for re-start confirmation before going back to the beginning and re-initializing.