Javascript - setInterval soll nur x Mal feuern?

74

Ist es möglich zu begrenzen, wie oft setInterval in Javascript ausgelöst wird?

javascript Probocop
quelle

Antworten:

174

Sie können clearInterval()nach x Anrufen anrufen :

var x = 0;
var intervalID = setInterval(function () {

   // Your logic here

   if (++x === 5) {
       window.clearInterval(intervalID);
   }
}, 1000);

Um globale Variablen zu vermeiden, wäre eine Verbesserung der oben genannten:

function setIntervalX(callback, delay, repetitions) {
    var x = 0;
    var intervalID = window.setInterval(function () {

       callback();

       if (++x === repetitions) {
           window.clearInterval(intervalID);
       }
    }, delay);
}

Dann können Sie die neue setInvervalX()Funktion wie folgt aufrufen :

// This will be repeated 5 times with 1 second intervals:
setIntervalX(function () {
    // Your logic here
}, 1000, 5);
Daniel Vassallo
quelle
Hey @DanielVassallo, sag, ich möchte das Intervall nur beim 3. Rückruf löschen, weil es vielleicht endlich eine Logik bestanden hat. Wird die Rückgabe von false aus setIntervalX () zurückgegeben oder wird irgendwo ein zusätzlicher Parameter benötigt? Es sieht so aus, als ob ich einen Bool vom Rückruf () zurückgeben kann, dann kann ich aus dem Intervall springen.
Ben Sewards
Vielen Dank für das nützliche Snippet @DanielVassallo
Anahit DEV
@BenSewards Wo sieht es so aus, als könnten Sie einen Bool aus dem Rückruf zurückgeben, um aus dem Intervall herauszuspringen? Sie können clearIntervalIhren Rückruf so oft eingeben, wie Sie möchten, und ihn auf eine beliebige Logik reagieren lassen. Es ist nicht erforderlich, einen Bool zurückzugeben, um das gleiche Ergebnis zu erzielen.
Kyle Delaney
Es gibt drei Antworten, die setTimeout verwenden, um das Intervall zu löschen, und nur zwei, die das Intervall im eigenen Rückruf des Intervalls löschen. Warum ist das so besser?
Kyle Delaney
4

Sie können setTimeout und eine for-Schleife verwenden.

var numberOfTimes = 20;
delay = 1000;

for (let i = 0; i < numberOfTimes; i++) {
    setTimeout( doSomething, delay * i);
}
Jerald Macachor
quelle
@ProFan dieser "Rat" klingt sehr willkürlich, niemand hat jemals so etwas gesagt
Jivan
4

Sie können ein Timeout festlegen, das aufruft clearInterval. Das sollte funktionieren:

function setTimedInterval(callback, delay, timeout){
    var id=window.setInterval(callback, delay);
    window.setTimeout(function(){
        window.clearInterval(id);
    }, timeout);
}
Schlag
quelle
Wow, meine Antwort 13 Sekunden später war praktisch identisch . Ausgeflippt.
TJ Crowder
@TJ Manchmal finde ich das Gegenteil verrückter: Wenn wir viele verschiedene Lösungen für ein triviales Problem veröffentlichen!
Daniel Vassallo
@TJ Crowder: Seltsam, dass Sie lokale Variablen und anonyme Funktionen verwenden;)
Stagas
@TJCrowder das ist nichts, ich kann eine Antwort in weniger als 7 Sekunden klonen :)
Ilya Gazman
Dies berücksichtigt X nicht. Wenn sich die Ausführungszeit des Rückrufs verzögert, wird sie nicht X-mal ausgelöst, nach denen einige suchen. Beispiel: setTimedInterval (Rückruf, 100, 1000); Wenn die Rückrufausführung> 1 00 ms ist, wird sie wahrscheinlich einige Male und nicht zehnmal ausgelöst.
Klodoma
3

Ich persönlich bevorzuge die Verwendung von setTimeout()Abständen, um den gleichen Effekt zu erzielen

// Set a function to run every "interval" seconds a total of "x" times
var x = 10;
var interval = 1000;

for (var i = 0; i < x; i++) {
    setTimeout(function () {
        // Do Something
    }, i * interval)
}

Es ist keine Reinigung erforderlich clearInterval()

Sie können es einschließen, um das Auslaufen von Variablen zu vermeiden, und es sieht ziemlich sauber aus :)

// Definition
function setIntervalLimited(callback, interval, x) {

    for (var i = 0; i < x; i++) {
        setTimeout(callback, i * interval);
    }

}

// Usage
setIntervalLimited(function() {
    console.log('hit');          // => hit...hit...etc (every second, stops after 10)
}, 1000, 10)
NDavis
quelle
1

Dadurch wird das Intervall nach 10 Anrufen gelöscht

<html>
<body>

<input type="text" id="clock" />
<script language=javascript>
var numOfCalls = 0;
var int=self.setInterval("clock()",1000);
function clock()
  {
  var d=new Date();
  var t=d.toLocaleTimeString();
  document.getElementById("clock").value=t;
  numOfCalls++;
  if(numOfCalls == 10)
     window.clearInterval(int);
  }
</script>
</form>


</body>
</html>
Amr Elgarhy
quelle
1

Und für diejenigen unter euch, die setTimeout und liebevolle Rekursion bevorzugen, ist hier mein Vorschlag;)

const setIntervalX = (fn, delay, times) => {
  if(!times) return

  setTimeout(() => {
    fn() 
    setIntervalX(fn, delay, times-1)
  }, delay)
}

Dann können Sie wie vorgeschlagen die neue setInvervalX()Funktion wie folgt aufrufen :

// This will be repeated every for 5 times with 1 second intervals:
setIntervalX(function () {
    // Your logic here
}, 1000, 5);
Jonas Johansson
quelle
0

Ich habe ein kleines Paket gemacht, das dies für NodeJS macht.

https://www.npmjs.com/package/count-interval

Es ist ein Drop-In-Ersatz für setInterval (einschließlich Parameterübergabe), es wird jedoch ein zusätzlicher countParameter benötigt. In diesem Beispiel wird eine Nachricht einmal pro Sekunde, jedoch nur dreimal gedruckt.

const countInterval = require('./countInterval');

const timer = countInterval(() => {
   console.log('fired!', new Date());
}, 1000, 3);
jimm101
quelle