How to start and stop pause setInterval

Question

I m trying to pause and then play a setInterval loop   After I have stopped the loop  the  start  button in my attempt doesn t seem to work     x000D   x000D  input   document getElementById  input    x000D   x000D  function start     x000D    add   setInterval  input value     1000   x000D    x000D  start    x000D   lt input type  number  id  input    gt  x000D   lt input type  button  onclick  clearInterval add   value  stop    gt  x000D   lt input type  button  onclick  start    value  start    gt  x000D   x000D   x000D    Is there a working way to do this

User · Answer

add is a local variable not a global variable try this

_x000D_

var add;_x000D_
var input = document.getElementById("input");_x000D_
_x000D_
function start() {_x000D_
  add = setInterval("input.value++", 1000);_x000D_
}_x000D_
start();

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<input type="number" id="input" />_x000D_
<input type="button" onclick="clearInterval(add)" value="stop" />_x000D_
<input type="button" onclick="start()" value="start" />

_x000D_

User · Answer

As you ve tagged this jQuery      First  put IDs on your input buttons and remove the inline handlers    lt input type  number  id  input    gt   lt input type  button  id  stop  value  stop   gt   lt input type  button  id  start  value  start   gt    Then keep all of your state and functions encapsulated in a closure   EDIT updated for a cleaner implementation  that also addresses  Esailija s concerns about use of setInterval       function         var timer   null      var input   document getElementById  input         function tick               input value          start              restart the timer             function start         use a one-off timer         timer   setTimeout tick  1000               function stop             clearTimeout timer                   start   bind  click   start      use  on in jQuery 1 7          stop   bind  click   stop        start        if you want it to auto-start       This ensures that none of your variables leak into global scope  and can t be modified from outside    Updated  working demo at http   jsfiddle net alnitak Q6RhG

User · Answer

The reason you re seeing this specific problem  JSFiddle wraps your code in a function  so start   is not defined in the global scope    Moral of the story  don t use inline event bindings  Use addEventListener attachEvent   Other notes  Please don t pass strings to setTimeout and setInterval  It s eval in disguise  Use a function instead  and get cozy with var and white space   x000D   x000D  var input   document getElementById  input      add   function start       add   setInterval function         input value         1000      start    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt input type  number  id  input    gt   lt input type  button  onclick  clearInterval add   value  stop    gt   lt input type  button  onclick  start    value  start    gt  x000D   x000D   x000D

User · Answer

function        var i   0      function stop            clearTimeout i              function start            i   setTimeout  timed  1000               function timed           document getElementById  input   value           start               window stop   stop      window start   start         http   jsfiddle net TE3Z2

User · Answer

You can t stop a timer function mid-execution  You can only catch it after it completes and prevent it from triggering again

User · Answer

See Working Demo on jsFiddle  http   jsfiddle net qHL8Z 3    x000D   x000D    function     x000D    var timer   null  x000D      interval   1000  x000D      value   0  x000D   x000D        start   click function     x000D      if  timer     null  return  x000D      timer   setInterval function     x000D            input   val   value   x000D         interval   x000D        x000D   x000D        stop   click function     x000D      clearInterval timer   x000D      timer   null x000D        x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt input type  number  id  input    gt  x000D   lt input id  stop  type  button  value  stop    gt  x000D   lt input id  start  type  button  value  start    gt  x000D   x000D   x000D

[javascript] How to start and stop/pause setInterval?

Examples related to javascript

Examples related to jquery

Examples related to loops

Examples related to setinterval