Wie lösche ich dieses setInterval innerhalb einer Funktion?

Normalerweise würde ich das Intervall auf eine Variable setzen und es dann wie folgt löschen, var the_int = setInterval(); clearInterval(the_int);aber damit mein Code funktioniert, habe ich es in eine anonyme Funktion eingefügt:

function intervalTrigger() {
  setInterval(function() {
    if (timedCount >= markers.length) {
      timedCount = 0;
    }

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

intervalTrigger();

Wie lösche ich das? Ich habe es ausprobiert und versucht var test = intervalTrigger(); clearInterval(test);, sicher zu sein, aber das hat nicht funktioniert.

Grundsätzlich muss dies nicht mehr ausgelöst werden, sobald auf meine Google Map geklickt wird, z

google.maps.event.addListener(map, "click", function() {
  //stop timer
});

Die setIntervalMethode gibt ein Handle zurück, mit dem Sie das Intervall löschen können. Wenn die Funktion sie zurückgeben soll, geben Sie einfach das Ergebnis des Methodenaufrufs zurück:

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

Dann, um das Intervall zu löschen:

window.clearInterval(id);

// 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) {
    window.clearInterval(intervalListener);
  }
}

the_int=window.clearInterval(the_int);

Der einfachste Weg, den ich mir vorstellen kann: eine Klasse hinzufügen.

Fügen Sie einfach eine Klasse (für ein beliebiges Element) hinzu und prüfen Sie innerhalb des Intervalls, ob es vorhanden ist. Dies ist meiner Meinung nach zuverlässiger, anpassbarer und sprachübergreifender als jede andere Methode.

var i = 0;
this.setInterval(function() {
  if(!$('#counter').hasClass('pauseInterval')) { //only run if it hasn't got this class 'pauseInterval'
    console.log('Counting...');
    $('#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
    $(this).addClass('pauseInterval');
  },function() { //mouse leave
    $(this).removeClass('pauseInterval');
  }
);

/* Other example */
$('#pauseInterval').click(function() {
  $('#counter').toggleClass('pauseInterval');
});

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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


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