CODEWITHSUNDEEP
javascripthtml
deb97
deb97

Reputation: 61

Turn off the function in JavaScript html

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>

Upvotes: 2

Views: 129

Answers (1)

cediwelli
cediwelli

Reputation: 370

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>

Upvotes: 5

Related Questions