javascript - Start and Pause Interval onclick -

I'm trying to start an interval on ready, then stop it on click and start over again where I left off Was there. I have everything but 'resume' part can I get some help?

This is my Bela:

HTML:

  & lt; A href = "questions_create.asp? Interactive = off" class = "start" & gt; & Lt; Img src = 'icons / control_stop.png' width = '16 'height =' 16 'border =' 0 '/ /> gt; & Lt; / A & gt; & Lt; Span id = "stop" style = "cursor: indicator; display: none;" Class = "posit tutorial loop" value = "stop" & gt; & Lt; Img src = 'http: //examsoftdemo.com/Icons/control_pause.png width =' 16 'height = '16' border = '0' /> & Lt; / Span & gt; & Lt; Span id = "start" style = "cursor: indicator;" Class = "playit tutorialLoop" value = "start" & gt; & Lt; Img src = 'http: //examsoftdemo.com/Icons/control_play.png' width = '16 'height =' 16 'border =' 0 '/ & gt; & Lt; / Span & gt;   
 JS:  
  Start the function fade loop () {// interval loop var counter = 0, divs = $ ('.fader'). Css ('Visibility', 'View'). Hide (), Fear = 100; // Animate function showDiv () {// div divs.fadeOut (dur) // Hide all divs. Filter (index (index) {return index == counter% divs.length;}) // data to show the correct device. Delay (delay) // Delay until the delay is over. Fade In (Fear, Function () {$ (this). Focus ();}); // and show it counter ++; }; // show the loop function through the div and the correct div show (); // Diva returns set before displaying interval (function () {showDiv (); // show next device}, 2 * 1000); // Make it every 2 seconds}; Var interval = faucet, counter = 0; $ (". Playit") ('Click', function (e) {// interval loop / e.stopPropagation () play, if (! Interval) {interval = fadeLoop (); counter = counter + 1; $ ("tutorial loop") Val (counter);}}); $ (".pozit"). ('Click', function (e) {clear interval); interval = null // $ (this) .val ("start"); // interval = undefined;}); . Click on $ (". Playit") (); // simulation start    
 
 
 You have two counter variables, a global one, a limited The global one on Fade Loop function is used only for:  
  $ ("Tutorial Loop"). Val (counter);   
 While in FedLoops the message is used for one, and it gets reset every time the play button is clicked. Instead, remove one in the Fed Loop, and only use the global one.  
 In addition to this, it looks like the loop raises the existing one on a single device, so you  - = 1  to be persistent (although it can not be your desired behavior is).  
 The final code may look like this:  
  function fadeLoop () {var divs = $ ('.fader'). CSS ('Visibility', 'Visible'). Hiding (), fear = 100; Function showDiv () {// ...}; // show the loop function through the div and the correct div show (); // Diva returns set before displaying interval (function () {showDiv (); // show next device}, 2 * 1000); // Make it every 5 seconds}; Var interval = faucet, counter = 0; Interval $ (". Playit") ('click', function (e) {if (interval) {counter - = 1; interval = feed loop (); $ ("tutorial loop") .val (counter); }}); $ (".pozit"). ('Click', function (e) {clear interval (interval); interval = null}); . Click on $ (". Playit") (); });