How to start and stop/pause setInterval?
See Working Demo on jsFiddle: http://jsfiddle.net/qHL8Z/3/
$(function() { var timer = null, interval = 1000, value = 0; $("#start").click(function() { if (timer !== null) return; timer = setInterval(function() { $("#input").val(++value); }, interval); }); $("#stop").click(function() { clearInterval(timer); timer = null });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="number" id="input" /><input id="stop" type="button" value="stop" /><input id="start" type="button" value="start" />
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:
var input = document.getElementById("input"), add;function start() { add = setInterval(function() { input.value++; }, 1000);}start();<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" />
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/