Empecher la repetition d'un setTimeout()
Résolu
V4lentin
Messages postés
4
Date d'inscription
Statut
Membre
Dernière intervention
-
V4lentin Messages postés 4 Date d'inscription Statut Membre Dernière intervention -
V4lentin Messages postés 4 Date d'inscription Statut Membre Dernière intervention -
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:
CSS:
JAVASCRIPT:
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:
- Empecher la repetition d'un setTimeout()
- Empecher adobe de se connecter à internet - Forum Windows
- Empecher pub youtube - Accueil - Streaming
- Un bloqueur de publicité empêche la lecture. veuillez le désactiver pour démarrer la vidéo - Forum Logiciels
- Empecher la modification de cellules excel - Guide
- Comment empêcher le partage de mes publications sur facebook ✓ - Forum Facebook
5 réponses
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
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.
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.
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
Mais mon clearTimeout ne marche pas et je ne comprends pas pourquoi.
<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.
pas testé... mais moi je ferai un truc du genre ( pour éviter de générer plusieurs fois ton settimeout )
en gros... comme dans le second exemple de la page que je t'ai donné .....
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