-1

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.

John H
  • 1
  • Are you saying `setTimeout()` appears thousands of times in your code? If so, I'd restructure that to put all the information about each step in an array, then use a single function that knows how to draw the next thing from the array and uses `setTimeout()` to call itself to do the next step. That way to pause the whole thing you only have to worry about that one function. – nnnnnn Dec 06 '17 at 01:46
  • No, setTimeout is in 2 loops, first one is for each entire line, arc or circle to be drawn, then each one is passed to another setTimeout loop that draws each pixel of aforementioned line, arc or circle one pixel at a time. the canvas is 800 x 800, an average line length is 400, and there are about 100 actual lines , so that is 4000 setTime out calls, ands that's a small one too. The timing is all calculated from the get go and put in an array, I was shocked it worked so well. – John H Dec 06 '17 at 01:54
  • @JohnH checkout the official answer at https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep I think what you need is the sleep function scripted in that answer which makes use of the Promise feature. – slevy1 Dec 06 '17 at 02:08
  • [XyProblem](http://mywiki.wooledge.org/XyProblem). You are trying to solve the wrong part of your issue. The real issue is that your code doesn't works well when user scrolls. This is most likely due to a performance issue, which itself is probably due to coding issues. Without seeing your code and an [mcve] it's impossible for us to help you correctly. But from what you are saying, you already got the *how-to-do-an-visual-animation* part completely wrong. Don't use multiple `setTimeout`, but a single `requestAnimationFrame` loop. This basic error only tells what else wrong there might be... – Kaiido Dec 06 '17 at 02:58
  • Oh, thank you, I never seen that requestanimationframe loop in any of the research, which was a lot, when I started coding this, incredible. I don't know how to make a link but this is the solution, plain and simple. – John H Dec 06 '17 at 11:30
  • oops, heres the link, https://css-tricks.com/using-requestanimationframe/ – John H Dec 06 '17 at 11:30
  • Thats why you guys are genious's here, thank you Kaiido. – John H Dec 06 '17 at 11:34

2 Answers2

1

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;
        main();
    } else {
 //whatevs
}

or

while (!sleep) {
  // do stuff
  alert()
  sleep = true;
}
Derek 朕會功夫
  • 92,235
  • 44
  • 185
  • 247
ABC
  • 2,068
  • 1
  • 10
  • 21
1

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.

McMurphy
  • 1,235
  • 1
  • 15
  • 39