Implementing a pause and resume mechanism for javascript loop execution -

Implementing a pause and resume mechanism for javascript loop execution -

i'm trying provide pause , resume functionality loop recursive calls. i'm using "settimeout" , "cleartimeout" functions this...

when user clicks button "pause", timer set infinite time (maximum possible). when user clicks button "resume", timeout supposed cleared "cleartimeout" call. timeout never cleared. mistake?

thank in advance..

jfiddle demo

html:

<button id="loop_controler">pause</button>

js:

var array = [1,2,3,4,5,6,7]; var pause = false; var timer; function execute(array,i){ var pausetime = 0; if (pause){ pausetime = 2147483647; //max value timeout } timer = settimeout(function(){ //set timer settimeout(function () { alert(array[i]); //this timeout gives constant delay if (array.length > i) //(just give plenty time users click button) execute(array,i+1); }, 1000); }, pausetime); console.log('set ' + timer); } $('document').ready(function(){ $('#loop_controler').click(function(){ if ($(this).text() == 'pause'){ pause = true; $(this).text('resume'); } else { cleartimeout(timer); //clear timer console.log('clear ' + timer); pause = false; $(this).text('pause'); } }); execute(array,0); });

back in 2012 wrote snippet of code delta timing in javascript, uses settimeout , has start , stop functions: https://gist.github.com/aaditmshah/2056987

see demo:

class="snippet-code-js lang-js prettyprint-override">var button = document.queryselector("button"); var div = document.queryselector("div"); var running = false; var number = 1; var timer = new deltatimer(function () { div.innerhtml = number++; }, 1000); button.addeventlistener("click", function () { if (running) { timer.stop(); button.innerhtml = "start"; running = false; } else { timer.start(); button.innerhtml = "stop"; running = true; } }); function deltatimer(render, interval) { var timeout; var lasttime; this.start = start; this.stop = stop; function start() { timeout = settimeout(loop, 0); lasttime = date.now(); homecoming lasttime; } function stop() { cleartimeout(timeout); homecoming lasttime; } function loop() { var thistime = date.now(); var deltatime = thistime - lasttime; var delay = math.max(interval - deltatime, 0); timeout = settimeout(loop, delay); lasttime = thistime + delay; render(thistime); } } class="snippet-code-html lang-html prettyprint-override"><button>start</button> <div></div>

hope helps.

javascript