I have a button that performs console log an array every 500ms in setInterval, I want when I click the button for the first time, I invoke the function in setInterval, then I click the button again, the console will stop the setInterval.
I tried with this HTML but when I click the button for the second time, the console still logged the array. what should I do so the function will be inactive or at least the setInterval will be inactive?
var a = [2,3,4]
var state = false;
function addFunc() {
if (state === false) {
state = !state
console.log(state);
setInterval(() => {
pushRandom();
}, 1000)
}
else if (state===true) {
state = !state
console.log(state);
}
}
function pushRandom() {
a.push(Math.random())
console.log(a)
}<h1>The onclick Event</h1>
<p>The onclick event is used to trigger a function when an element is clicked on.</p>
<button onclick="addFunc()">add</button>
<p id="demo"></p>Set Interval returns an Id which you can use in clearInterval(Id) to stop the Interval.
var intervalPushRandom;
function addFunc() {
if (state === false){
state = !state
console.log(state);
intervalPushRandom = setInterval(() => {
pushRandom();
}, 1000)
}
else if (state===true){
clearInterval(intervalPushRandom);
state = !state
console.log(state);
}
}
Full demo:
<!DOCTYPE html>
<html>
<body>
<h1>The onclick Event</h1>
<p>The onclick event is used to trigger a function when an element is clicked
on.</p>
<button onclick="addFunc()">add</button>
<p id="demo"></p>
<script>
var a = [2, 3, 4]
var state = false;
let myInterval;
function addFunc() {
if (state === false) {
state = true;
console.log(state);
myInterval = setInterval(pushRandom, 1000);
} else if (state === true) {
state = false;
console.log(state);
clearInterval(myInterval);
}
}
function pushRandom() {
a.push(Math.random());
console.log(a);
}
</script>
</body>
</html>