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 :
input = document.getElementById("input");_x000D_
_x000D_
function start() {_x000D_
add = setInterval("input.value++", 1000);_x000D_
}_x000D_
start();
_x000D_
<input type="number" id="input" />_x000D_
<input type="button" onclick="clearInterval(add)" value="stop" />_x000D_
<input type="button" onclick="start()" value="start" />
_x000D_
Is there a working way to do this?
This question is related to
javascript
jquery
loops
setinterval
As you've tagged this jQuery ...
First, put IDs on your input buttons and remove the inline handlers:
<input type="number" id="input" />
<input type="button" id="stop" value="stop"/>
<input type="button" id="start" value="start"/>
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/
See Working Demo on jsFiddle: http://jsfiddle.net/qHL8Z/3/
$(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_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<input type="number" id="input" />_x000D_
<input id="stop" type="button" value="stop" />_x000D_
<input id="start" type="button" value="start" />
_x000D_
(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;
})()
You can't stop a timer function mid-execution. You can only catch it after it completes and prevent it from triggering again.
add is a local variable not a global variable try this
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_
Source: Stackoverflow.com