StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The Timeout was easy enough to find a solution for, but the Interval was a little bit trickier.</p> <p>I came up with the following two classes to solve this issues:</p> <pre class="lang-js prettyprint-override"><code>function PauseableTimeout(func, delay){ this.func = func; var _now = new Date().getTime(); this.triggerTime = _now + delay; this.t = window.setTimeout(this.func,delay); this.paused_timeLeft = 0; this.getTimeLeft = function(){ var now = new Date(); return this.triggerTime - now; } this.pause = function(){ this.paused_timeLeft = this.getTimeLeft(); window.clearTimeout(this.t); this.t = null; } this.resume = function(){ if (this.t == null){ this.t = window.setTimeout(this.func, this.paused_timeLeft); } } this.clearTimeout = function(){ window.clearTimeout(this.t);} } function PauseableInterval(func, delay){ this.func = func; this.delay = delay; this.triggerSetAt = new Date().getTime(); this.triggerTime = this.triggerSetAt + this.delay; this.i = window.setInterval(this.func, this.delay); this.t_restart = null; this.paused_timeLeft = 0; this.getTimeLeft = function(){ var now = new Date(); return this.delay - ((now - this.triggerSetAt) % this.delay); } this.pause = function(){ this.paused_timeLeft = this.getTimeLeft(); window.clearInterval(this.i); this.i = null; } this.restart = function(sender){ sender.i = window.setInterval(sender.func, sender.delay); } this.resume = function(){ if (this.i == null){ this.i = window.setTimeout(this.restart, this.paused_timeLeft, this); } } this.clearInterval = function(){ window.clearInterval(this.i);} } </code></pre> <p>These can be implemented as such:</p> <pre><code>var pt_hey = new PauseableTimeout(function(){ alert("hello"); }, 2000); window.setTimeout(function(){ pt_hey.pause(); }, 1000); window.setTimeout("pt_hey.start()", 2000); </code></pre> <p>This example will set a pauseable Timeout (pt_hey) which is scheduled to alert, "hey" after two seconds. Another Timeout pauses pt_hey after one second. A third Timeout resumes pt_hey after two seconds. pt_hey runs for one second, pauses for one second, then resumes running. pt_hey triggers after three seconds.</p> <p>Now for the trickier intervals</p> <pre><code>var pi_hey = new PauseableInterval(function(){ console.log("hello world"); }, 2000); window.setTimeout("pi_hey.pause()", 5000); window.setTimeout("pi_hey.resume()", 6000); </code></pre> <p>This example sets a pauseable Interval (pi_hey) to write "hello world" in the console every two seconds. A timeout pauses pi_hey after five seconds. Another timeout resumes pi_hey after six seconds. So pi_hey will trigger twice, run for one second, pause for one second, run for one second, and then continue triggering every 2 seconds.</p> <h2><em> OTHER FUNCTIONS </em></h2> <ul> <li><p><em>clearTimeout()</em> and <em>clearInterval()</em></p> <p><code>pt_hey.clearTimeout();</code> and <code>pi_hey.clearInterval();</code> serve as an easy way to clear the timeouts and intervals.</p></li> <li><p><em>getTimeLeft()</em></p> <p><code>pt_hey.getTimeLeft();</code> and <code>pi_hey.getTimeLeft();</code> will return how many milliseconds till the next trigger is scheduled to occur.</p></li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload