How do I clear this setInterval inside a function?


How do I clear this setInterval inside a function?

Normally, I’d set the interval to a variable and then clear it like var the_int = setInterval(); clearInterval(the_int); but for my code to work I put it in an anonymous function:
function intervalTrigger() {
setInterval(function() {
if (timedCount >= markers.length) {
timedCount = 0;

google.maps.event.trigger(markers[timedCount], “click”);
}, 5000);


How do I clear this? I gave it a shot and tried var test = intervalTrigger(); clearInterval(test); to be sure, but that didn’t work.
Basically, I need this to stop triggering once my Google Map is clicked, e.g.
google.maps.event.addListener(map, “click”, function() {
//stop timer


Solution 1:

The setInterval method returns a handle that you can use to clear the interval. If you want the function to return it, you just return the result of the method call:

function intervalTrigger() {
  return window.setInterval( function() {
    if (timedCount >= markers.length) {
       timedCount = 0;
    google.maps.event.trigger(markers[timedCount], "click");
  }, 5000 );
var id = intervalTrigger();

Then to clear the interval:


Solution 2:

// Initiate set interval and assign it to intervalListener
var intervalListener = self.setInterval(function () {someProcess()}, 1000);
function someProcess() {
  console.log('someProcess() has been called');
  // If some condition is true clear the interval
  if (stopIntervalIsTrue) {

Solution 3:


Solution 4:

Simplest way I could think of: add a class.

Simply add a class (on any element) and check inside the interval if it’s there. This is more reliable, customisable and cross-language than any other way, I believe.

var i = 0;
this.setInterval(function() {
  if(!$('#counter').hasClass('pauseInterval')) { //only run if it hasn't got this class 'pauseInterval'
    $('#counter').html(i++); //just for explaining and showing
  } else {
    console.log('Stopped counting');
}, 500);

/* In this example, I'm adding a class on mouseover and remove it again on mouseleave. You can of course do pretty much whatever you like */
$('#counter').hover(function() { //mouse enter
  },function() { //mouse leave

/* Other example */
$('#pauseInterval').click(function() {
body {
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;
#counter {
  width: 50%;
  background: #ddd;
  border: 2px solid #009afd;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  transition: .3s;
  margin: 0 auto;
#counter.pauseInterval {
  border-color: red;  
<!-- you'll need jQuery for this. If you really want a vanilla version, ask -->
<script src=""></script>

<p id="counter">&nbsp;</p>
<button id="pauseInterval">Pause/unpause</button></p>