jQuery / JavaScript：使用相同的按钮启动和终止循环

Question

I want to build a button that when I click it, the function in JavaScript associated with it initiates (so a loop inside it start doing something).

If I click it again before the loop inside the function finishes, the loop will terminates.

If I click it again after the loop inside the function has already finished, the loop will just start as usual.

How do I do this with the following code? Thanks in advance.

HTML:

<button id="startstop" class="btn btn-primary" onclick="count()">

JavaScript:

function count() {
    var val = 0;
    var loop = setInterval(function(){
        val++;
        if (val > 1000} {
           clearInterval(loop);
        }
    }, 100);
}

Answer 1

try this code

var loop; 
function count() {
    var val = 0;
      if (loop) {
        clearInterval(loop);
        loop = null;
      }
      else{
     loop = setInterval(function(){
        val++;
        console.log(val);
        if (val > 1000) {
           clearInterval(loop);
           loop = null;
        }
    }, 100);
      }
}

Answer 2

Place loop variable in global scope and everytime the user clicked stop previous loop if it's already started if not start it.

Hope this helps.

 var loop=null; count = function () { var val = 0; //Stop previous loop if it's already started if(loop!=null){ clearInterval(loop); loop=null; }else{ loop = setInterval(function(){ val++; console.log(val); $('span').text(val); if (val >= 20) { clearInterval(loop); } }, 100); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="startstop" class="btn btn-primary" onclick="count()">Count</button> <span>0</span> 

Answer 3

I'm not a big fan of doing work for people, but on this occasion I'll succumb...

You need to store the internal ID outside of the function, and base your process on that. If the ID is not set, start the interval, if it is set stop the interval.

Note, that I've massively reduced the length of interval, and the number of times it fires for this example...

 var _intervalId = -1; function count() { if (_intervalId == -1) { var val = 0; _intervalId = setInterval(function(){ val++; if (val > 200) { clearInterval(_intervalId); _intervalId = -1 document.getElementById("output").innerHTML = "stopped automatically"; } }, 10); document.getElementById("output").innerHTML = "started"; } else { clearInterval(_intervalId); _intervalId = -1; document.getElementById("output").innerHTML = "stopped manually"; } } 

 <button onclick="count();return false">Click Here</button> <div id="output"></div> 

Answer 4

I had fun building a small class for this. Feel free to use.

 // Counter class function Counter(callback, speed, max, init){ var loop = null; this.callback = callback; this.value = init || 0; this.max = max; function count(){ if (this.max && this.value >= this.max) { clearInterval(loop); loop = null; } else { this.value++; } this.callback(this.value); } this.start = function(){ if(!this.isStarted){ loop = setInterval(count.bind(this), speed); } }; this.stop = function(){ if(this.isStarted){ clearInterval(loop); loop = null; } } Object.defineProperty(this, "isStarted", { get: function(){ return !!loop; }}); } // Usage example. var result = document.getElementById("counter"); var button = document.getElementById("startstop"); // Create the counter and the callback. var counter = new Counter(function(val){ result.innerHTML = val; }, 100, 1000); // Init the result value. result.innerHTML = counter.value; // Listen for click events on the button. button.addEventListener("click", function(){ if(counter.isStarted){ counter.stop(); } else { counter.start(); } }); 

 <div id="counter"></div> <button id="startstop">Toggle</button>