Why does the setInterval function only run once before stopping?

Question

Why does the setInterval function only run once before stopping?

Can someone assist me with this issue? The stop button only invokes clearInterval() once - what is causing this problem in the code?

var startButton = document.querySelector("#start");
var stopButton = document.querySelector("#stop");

window.addEventListener('load', () => {

  function runInterval() {
    var time = setInterval(function() {
    console.log("Set interval executed");
  }, 1500);
    return time;
  }

  var time = runInterval();
  
  stopButton.addEventListener("click", function() {   
    clearInterval(time);
  });

  startButton.addEventListener("click", function() {
    runInterval();
  });
});

<button id="stop"> stop! </button>
<button id="start"> start! </button>

javascript

Answer 1

Answer №1

It appears that setInterval is being called multiple times, resulting in the activation of several timers simultaneously. To create a more efficient version, consider the following:

let timer;

const begin = () => {
  console.log("initiating...")
  if(!timer) {
    timer = setInterval(
      ()=> {console.log("interval")}
      , 1000)  
  }
}

const halt = () => {
  console.log("stopped")
  clearInterval(timer);
  timer = null; 
}

<button onclick="halt()" id="halt"> halt! </button>
<button onclick="begin()" id="begin"> begin! </button>

Answer 2

It appears that setInterval is being called multiple times, resulting in the activation of several timers simultaneously. To create a more efficient version, consider the following:

let timer;

const begin = () => {
  console.log("initiating...")
  if(!timer) {
    timer = setInterval(
      ()=> {console.log("interval")}
      , 1000)  
  }
}

const halt = () => {
  console.log("stopped")
  clearInterval(timer);
  timer = null; 
}

<button onclick="halt()" id="halt"> halt! </button>
<button onclick="begin()" id="begin"> begin! </button>

Answer 3

Answer №2

Were you aware that the declaration

var time = setInterval(function() {..})

is within the scope of the interval() function? Therefore, its scope is limited to the interval() function.

However, another declaration var tiempo = intervalo() exists outside of the interval function. These two variables, tiempo, are distinct entities. This is why clearInterval(tiempo); does not work as expected.

Why does it work the first time? This is because when the DOM is loaded and the event load is triggered, the code inside the function sets var tiempo = intervalo(), which is only executed once until it is cleared. When clicking on start again, the outside tiempo was not set to anything.

The solution is simple: declare tiempo at the beginning of the load callback and then assign it the returned intervalId from setInterval.

var start = document.querySelector("#start");
var stop = document.querySelector("#stop");

window.addEventListener('load', () => {
  var tiempo;
  function intervalo() {
    //tiempo was declared in this function's closure
    tiempo = setInterval(function() {
    console.log("Set interval executed");
  }, 1500);
  }

  
  stop.addEventListener("click", function() {   
    //tiempo was declared in this function's closure
    clearInterval(tiempo);
  });

  start.addEventListener("click", function() {
    intervalo();
  });
});

p/s: please read more about scope in javascript, especially closure.

Answer 4

Were you aware that the declaration

var time = setInterval(function() {..})

is within the scope of the interval() function? Therefore, its scope is limited to the interval() function.

However, another declaration var tiempo = intervalo() exists outside of the interval function. These two variables, tiempo, are distinct entities. This is why clearInterval(tiempo); does not work as expected.

Why does it work the first time? This is because when the DOM is loaded and the event load is triggered, the code inside the function sets var tiempo = intervalo(), which is only executed once until it is cleared. When clicking on start again, the outside tiempo was not set to anything.

The solution is simple: declare tiempo at the beginning of the load callback and then assign it the returned intervalId from setInterval.

var start = document.querySelector("#start");
var stop = document.querySelector("#stop");

window.addEventListener('load', () => {
  var tiempo;
  function intervalo() {
    //tiempo was declared in this function's closure
    tiempo = setInterval(function() {
    console.log("Set interval executed");
  }, 1500);
  }

  
  stop.addEventListener("click", function() {   
    //tiempo was declared in this function's closure
    clearInterval(tiempo);
  });

  start.addEventListener("click", function() {
    intervalo();
  });
});

p/s: please read more about scope in javascript, especially closure.

Answer 5

Answer №3

It seems like your variable naming is causing confusion as you are constantly overwriting the previous setInterval id with a new one each time. To prevent this scenario, I recommend using a more clear and structured naming convention.

var startButton = document.querySelector("#start");
var stopButton = document.querySelector("#stop");
var intervalReferenceId;
window.addEventListener('load', () => {

  function runInterval() {
    return setInterval(function() {
      console.log("Set interval executed");
    }, 1500);
  }

  intervalReferenceId = runInterval();
  
  stopButton.addEventListener("click", function() {   
    clearInterval(intervalReferenceId);
  });

  startButton.addEventListener("click", function() {
    intervalReferenceId = runInterval();
  });
});

<button id="stop"> Stop! </button>
<button id="start"> Start! </button>

Answer 6

It seems like your variable naming is causing confusion as you are constantly overwriting the previous setInterval id with a new one each time. To prevent this scenario, I recommend using a more clear and structured naming convention.

var startButton = document.querySelector("#start");
var stopButton = document.querySelector("#stop");
var intervalReferenceId;
window.addEventListener('load', () => {

  function runInterval() {
    return setInterval(function() {
      console.log("Set interval executed");
    }, 1500);
  }

  intervalReferenceId = runInterval();
  
  stopButton.addEventListener("click", function() {   
    clearInterval(intervalReferenceId);
  });

  startButton.addEventListener("click", function() {
    intervalReferenceId = runInterval();
  });
});

<button id="stop"> Stop! </button>
<button id="start"> Start! </button>

Answer 7

Answer №4

It's important to remember that once you set the variable tiempo, you will need to reset it within your interval function.

var start = document.querySelector("#start");
var stop = document.querySelector("#stop");

window.addEventListener('load', () => {

  function intervalo() {
    return setInterval(function() {
       console.log("Set interval executed");
    }, 1500);
  }
  var timer = true;
  var tiempo = intervalo();
  
  stop.addEventListener("click", function() {   
    clearInterval(tiempo);
    timer = false;
  });

  start.addEventListener("click", function() {
    if(timer == false) {
       tiempo = intervalo();
       timer = true;
    }
  });
});

<button id="stop"> stop! </button>
<button id="start"> start! </button>

Answer 8

It's important to remember that once you set the variable tiempo, you will need to reset it within your interval function.

var start = document.querySelector("#start");
var stop = document.querySelector("#stop");

window.addEventListener('load', () => {

  function intervalo() {
    return setInterval(function() {
       console.log("Set interval executed");
    }, 1500);
  }
  var timer = true;
  var tiempo = intervalo();
  
  stop.addEventListener("click", function() {   
    clearInterval(tiempo);
    timer = false;
  });

  start.addEventListener("click", function() {
    if(timer == false) {
       tiempo = intervalo();
       timer = true;
    }
  });
});

<button id="stop"> stop! </button>
<button id="start"> start! </button>

Why does the setInterval function only run once before stopping?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Enable automatic suggestion in Monaco Editor by utilizing .d.ts files created from jsdoc

Transforming the code from numerous div elements to utilizing Ajax for efficient execution

Angular image source load test encountered an error

What exactly happens behind the scenes when utilizing the React hook useEffect()? Is an effect set up with useEffect able to halt the main thread

Can React provide custom styling to a specific segment of text before displaying it?

Function in jQuery to reference two different divs

The behavior of the "checked" attribute in VueJS checkboxes does not always match their actual state

Replace a function within a placeholder

Removing the initial 0 from the input

What is the best way to incorporate a success function into this?

Issue with passing jQuery cookie between two HTTPS pages

What is the best way to toggle a div and dynamically load content into it while it's open?

Exploring the potential of VSCode's RegEx search and replace

PHP enables downloading images on my server

Exploring Image Quality in Headless Browsers - A Comparison of Headless Chrome, PhantomJS, and Slimmer

Toggle visibility between 2 distinct Angular components

Using Three.js to create a variety of distinct lines

Accessing the req property beyond the route endpoints

getting rid of the angular hash symbol and prefix from the anchor tag

Developing single-page application frontends without utilizing node or npm