Wie kann ich diese Funktion in Jquery Schleife 5 mal machen

Question

Die Funktion besteht darin, den Hintergrund meines Körpers zu ändern, wenn ich die Leertaste drücken, wie Sie sehen können, wenn der Körper nach 5 Sekunden blau ist und wenn es blau danach ist 5 Sekunden wechselt er zu rot.

Ich möchte diese Funktionsschleife 5 mal machen.

Hier ist mein Code:

$(document).ready(function() { 
    $(document).keypress(function(e) { 
     if (e.which == 32) { 
      function changeColor() { 
       if ($('body').hasClass('yellow')) { 
        $('body').removeClass('yellow'); 
        $('body').addClass('blue'); 
       } else if ($('body').hasClass('blue')) { 
        $('body').removeClass('blue'); 
        $('body').addClass('red'); 
       } 
      } 
     } 
     setInterval(changeColor, 5000); 
    }); 
}); 

Answer 1

Sie nehmen einen Zähler aus dem Intervall und Funktion und verwenden:

var times2toggle = 5; 
var toggleColor = setInterval(changeColor, 5000); 

function changeColor() { 
    if(times2toggle--==0){ clearInterval(toggleColor); } 
    $('body').toggleClass('yellow blue'); 
} 

Ich habe auch die .toggleClass() an die Funktion. Dies macht, was Ihr Code tut, aber viel einfacher zu lesen. Wenn es mit gelb beginnt, schaltet die Umschaltklasse gelb aus und blau ein.

Answer 2

Sie müssten zählen, wie oft das Intervall ausgeführt wurde, und dann clearInterval aufrufen, sobald die maximale Anzahl der Zeiten n erreicht wurde.

Um zu vermeiden, globale Variablen verwenden, Ihre Intervalle Erstellen einer neuen Methode für den Aufruf, die beste Option ist:

function setIntervalTimes(callback, milliseconds, times) 
{ 
    var i=0; 
    var interval = window.setInterval(function() 
    { 
     callback(); 

     if (++i === times) { 
      window.clearInterval(interval); 
     } 
    }, milliseconds); 
} 

Jetzt Sie setInvervalTimes() wie folgt aufrufen können:

function changeColor() { 
    // Your logic... 
} 

$(document).ready(function() { 
    $(document).keypress(function(e) { 
    if (e.which == 32) { 
     // Perform your logic 5 times in 5 second intervals 
     setIntervalTimes(function() { 
     changeColor(); 
     }, 5000, 5); 
    } 
    }); 
});