Wie lösche ich dieses setInterval innerhalb einer Funktion?

163

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
});
Oscar Patensohn
quelle

Antworten:

262

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);
Guffa
quelle
2
Hinweis: Sie müssen nicht auf den globalen Bereich verweisen. setIntervalfunktioniert genauso gut wie window.setInterval.
Samy Bencherif
10
// 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);
  }
}
Marian Zburlea
quelle
1
the_int=window.clearInterval(the_int);
Anup
quelle
-4

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>

Aart den Braber
quelle