texte clignotant et fermetures

Question

Je cherche à faire du texte sur la page changer les couleurs toutes les 2 secondes. Voilà ce que j'ai:

function BlinkText() { 

    var TheTextColors = ['red', 'white', 'blue']; 
    var TheColor = Math.floor(Math.random() * 3) + 1; 

    var TheOpacity = (Math.floor(Math.random() * 20) + 80)/100; 

    $('#TheText').css('color', TheTextColors [TheColor]); 
    $('#TheText').css('opacity', TheOpacity); 

    setTimeout(BlinkText, 2000); 
} 

Et puis pour le css, j'ai ceci:

#TheText{ 
    -webkit-transition:all 2s ease; 
    -moz-transition:all 2s ease; 
    -o-transition:all 2s ease; 
    transition:all 2s ease;} 

Le problème est que quand je regarde la ligne de temps en chrome, je vois passer l'utilisation de la mémoire et toutes les 2 secondes Je soupçonne que la raison pour laquelle l'utilisation de la mémoire se développe continuellement est qu'il y a une fuite de mémoire et que je crée une fermeture accidentelle.

Quel est le problème avec mon code?

Merci pour vos suggestions.

Answer 1

Vous appelez setTimeout à partir de votre fonction, ajoutant ainsi à la pile à chaque appel.

Au lieu de cela, utilisez un appel intervalle de l'extérieur de la fonction:

function BlinkText() { 

    var TheTextColors = ['red', 'white', 'blue']; 
    var TheColor = Math.floor(Math.random() * 3) + 1; 

    var TheOpacity = (Math.floor(Math.random() * 20) + 80)/100; 

    $('#TheText').css('color', TheTextColors [TheColor]); 
    $('#TheText').css('opacity', TheOpacity); 
} 

setInterval(BlinkText, 2000); 

---

Vous pouvez optimiser ce code comme suit:

var BlinkText = (function() { 

    var TheTextColors = ['red', 'white', 'blue'], 
     $element = $('#TheText'); 

    return function() 
    { 
     var TheColor = Math.floor(Math.random() * 3) + 1, 
      TheOpacity = (Math.floor(Math.random() * 20) + 80)/100; 

     $element.css({ 
      'color': TheTextColors[TheColor], 
      'opacity': TheOpacity 
     }); 
    }; 
}()); 

setInterval(BlinkText, 2000); 

Nous faisons 3 choses différemment ici:

1. Nous n'interrogeons pas le DOM toutes les 2 secondes pour votre élément. Nous le mettons en cache une fois et le réutilisons.
2. Il n'est pas non plus nécessaire de créer un nouveau tableau de couleurs à chaque fois.
3. Enfin, nous enveloppons le tout dans une fonction anonyme auto-exécutable, afin de ne pas polluer l'espace de noms global avec ces variables.