Bonsoir,

J'ai un petit soucis : j'applique un setInterval de 5s à une fonction. La première fois, le temps s'écoule parfaitement. Une fois l'animation finie, elle se répète directement derrière (donc 2 fois d'affilée)... Puis 3s après (au lieu de 5 toujours), elle se répète.

J'ai essayé des solutions proposés sur le net, comme un SetTimeout, d'autres syntaxes de mont SetInterval mais je n'arrive pas à résoudre mon problème.

J'ai l'impression que les setInterval s'accumulent, j'ai essayé différentes formes pour mettre en place un clearInterval mais sans succès.

Voici le problème sous forme de GIF : https://image.noelshack.com/fichiers/2018/11/6/1521244182-dsd.gif

Et puis à la fin ça devient du n'importe quoi mdr.. : https://image.noelshack.com/fichiers/2018/11/6/1521244665-dsqdsqd.gif

Et voici la dernière syntaxe que j'ai essayé !

function preview_flash(){ 
	
   $("#preview_bouton").animate({color:"white",backgroundColor:"rgba(69,0,0,0.5)"},500).delay(250).animate({color:"black",backgroundColor:"rgb(206,189,163)"},500); 
} 
$(document).ready(function(){ 
    setInterval('preview_flash()',5000); 
});

Merci bien

-
Edité par Anonyme 17 mars 2018 à 0:58:14

Salut,

Si tu ajoutes un console.log juste avant le setInterval, est ce que le console.log apparait une seul fois ? 

J'aurais tendance à dire que ton setInterval se recrée réguliérement, d'où l'accelleration. 

function preview_flash(){ 
	
   $("#preview_bouton").animate({color:"white",backgroundColor:"rgba(69,0,0,0.5)"},500).delay(250).animate({color:"black",backgroundColor:"rgb(206,189,163)"},500); 
} 
$(document).ready(function(){ 
	console.log(preview_flash);
    setInterval('preview_flash()',5000); 
});

On dirait que oui, je n'ai jamais vraiment utilisée le console.log donc je ne sais pas si c'est de cette manière qu'il fallait le faire mais je crois que oui

console.log est ton ami ! Il faut l'utiliser un maximum (c'est plus agréable que des alertes)

Essaye avec ce code, il devrait éviter que l'interval soit récréé s'il existe déjà:

var previewInterval;
$(document).ready(function(){
    if(!previewInterval) {
        previewInterval = setInterval('preview_flash()',5000);
    }
});

romain-valin a écrit:

console.log est ton ami ! Il faut l'utiliser un maximum (c'est plus agréable que des alertes)

Essaye avec ce code, il devrait éviter que l'interval soit récréé s'il existe déjà:

var previewInterval;
$(document).ready(function(){
    if(!previewInterval) {
        previewInterval = setInterval('preview_flash()',5000);
    }
});

Cela fonctionne à merveille je t'en remercie, du premier coup ahah.

Je t'avoue que je ne saisis pas trop le if(!previewInterval).. Est-ce qu'on on lui dit "Si différent de previewInterval, alors blabla" ? Ou je suis à côté de la plaque.

Et oui, avec les alert, c'est vraiment très chiant, de devoir la fermer et tout à chaque fois. Et lorsque tu tombes sur une boucle infinie que tu fais planter le navigateur, t'es obligé de tout relancer ahah ! Je te remercie pour cette astuce on ne peut plus cool

-
Edité par Anonyme 17 mars 2018 à 1:20:59

Pour expliquer rapidement le code.

Je commence par initialiser une variable "previewInterval" (par défaut elle vaut null)

Ensuite la condition "!previewInterval" revient à mettre "true != previewInterval". Il s'agit juste d'une version abrégée. 

À savoir qu'une chaine de caractère ou un nombre sera considéré comme étant égale à true. 

Et dans la condition j'indique que previewInterval est égal à ce que retourne le setInterval (la fonction retourne un identifiant qu'on peut utiliser pour interrompre l'intervalle).

Ainsi au premier appel previewInterval est null donc on rentre dans la condition, mais pour les autres appels la variable n'est pas null donc on ne rentre pas dans la condition.