Empecher la repetition d'un setTimeout()

Résolu/Fermé

V4lentin Messages postés 4 Date d'inscription mardi 19 janvier 2021 Statut Membre Dernière intervention 21 janvier 2021 - Modifié le 19 janv. 2021 à 15:25
V4lentin Messages postés 4 Date d'inscription mardi 19 janvier 2021 Statut Membre Dernière intervention 21 janvier 2021 - 21 janv. 2021 à 11:35

Salut les gars ,
J'envoie ce message car ça fait 2 jours que je suis que j'essaie de résoudre le problème mais en vain.
En fait j'ai une photo sur mon site que je fait disparaitre au bout de 4 secondes grâce à un setTimeout, elle disparait aussi quand je scroll grâce a un .classList.add et quand je remonte tout en haut du site la photo re apparait.
Le problème c'est que quand je suis en haut su site puis que je scroll et que je remonte au bout de 3 secondes il va envoyer le changement de CSS du premier setTimeout (ce qui la fera disparaitre au bout de 1 seconde) et 4 secondes plus tard celui du 2ème (ce qui ne changera rien car l'image a déjà une opacité de 0.
Donc j'aimerais savoir si je peux bloquer le premier setTimeout une fois que scroll.

Voici le code.

HTML:

<img id="mon-image" src="img/image-1.jpeg">

CSS:

#mon-image{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    border: none;
    margin: auto;
    position: absolute;
}
#mon-image.fondu{
    opacity: 0;
    transition-duration: .5s;
}

JAVASCRIPT:

const image = document.querySelector('#mon-image')
      

 window.addEventListener('scroll', () => {

     if(window.scrollY > 50){
       image.classList.remove('fondu');
         
     }
     else{
       setTimeout(function(){image.classList.add('fondu')}, 4000);
           
      }   
      })

A voir également:

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
19 janv. 2021 à 15:57

Je pense que tu pourrais vérifier via un IF si ton opacity est déjà à 0 ou non avant de déclencher l'appel du setTimeOut

Réponse 2 / 5

V4lentin Messages postés 4 Date d'inscription mardi 19 janvier 2021 Statut Membre Dernière intervention 21 janvier 2021
20 janv. 2021 à 14:09

Non j'ai essayé et ça ne marche pas.
En fait mon problème c'est que j'ai plusieurs setTimeout qui se lance en même temps et donc j'aimerais que quand scrollY > 50 j'annule le setTimeout qui c'est activer au préalable.

Réponse 3 / 5

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
20 janv. 2021 à 15:27

https://www.w3schools.com/jsref/met_win_cleartimeout.asp

Réponse 4 / 5

V4lentin Messages postés 4 Date d'inscription mardi 19 janvier 2021 Statut Membre Dernière intervention 21 janvier 2021
Modifié le 20 janv. 2021 à 19:35

Salut, je me suis pencher sur le lien que tu m'as envoyer, j'ai fais quelques recherches et puis j'ai écrit se programme

<script>
       const image = document.querySelector('#mon-image')

       window.addEventListener('scroll', () => {

           if(window.scrollY < 50){
            var delay = setTimeout(function(){image.classList.add('fondu') ;}, 4000);
            }

           else{
            image.classList.remove('fondu');
            clearTimeout(delay);
            }

         })
</script>

Mais mon clearTimeout ne marche pas et je ne comprends pas pourquoi.

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
20 janv. 2021 à 20:31

pas testé... mais moi je ferai un truc du genre ( pour éviter de générer plusieurs fois ton settimeout )

const image = document.querySelector('#mon-image');
var dejalance = false;
 var delay ;

function addFondu(){
  if(dejalance == false ){
     dejalance = true;
    delay= setTimeout(function(){image.classList.add('fondu') ;}, 4000);
  }
}

 window.addEventListener('scroll', () => {
   if(window.scrollY < 50){
     addFondu();

   } else {
    image.classList.remove('fondu');
     clearTimeout(delay);
     dejalance = false;
  }

});

en gros... comme dans le second exemple de la page que je t'ai donné .....

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

V4lentin Messages postés 4 Date d'inscription mardi 19 janvier 2021 Statut Membre Dernière intervention 21 janvier 2021
21 janv. 2021 à 11:35

Merci mec, le programme fonctionne parfaitement et c'était exactement ce que je cherchais.

Discussions similaires

Message "Un bloqueur de publicité empêche la lecture..."

comment desactiver un bloqueur de pub

répétition sonnerie notifications Samsung

M6 Replay désactiver le bloqueur de publicité

Un bloqueur de publicité empêche la lecture. Veuillez le désacti

Discussions similaires

Newsletters