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
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
.
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:
var input = document.getElementById("input"),
add;
function start() {
add = setInterval(function() {
input.value++;
}, 1000);
}
start();
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="input" />
<input type="button" onclick="clearInterval(add)" value="stop" />
<input type="button" onclick="start()" value="start" />
_x000D_
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/
You can't stop a timer function mid-execution. You can only catch it after it completes and prevent it from triggering again.
(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;
})()
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_
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