1
votes

Comment détecter un événement de défilement / molette une seule fois dans une certaine période de temps?

Disons que j'ai un événement scroll / wheel comme celui-ci:

container.addEventListener("wheel", (e) => {
  const isScrollingDown = Math.sign(e.wheelDeltaY);

  // call some function once, don't listen for wheel event anymore
  // then listen for event again when done
}

Basé sur deltaY, je détecte si un utilisateur fait défiler vers le bas ou vers le haut. Comment pourrais-je appeler une fonction une seule fois lorsque je la détecte (ce qui est immédiat), supprimer l'écouteur d'événements, puis l'écouter à nouveau lorsque ma fonction est terminée?

Je ne peux pas supprimer l'écouteur d'événements de l'intérieur de mon écouteur d'événements, n'est-ce pas?

Merci d'avance.

javascript scroll events mousewheel

0 commentaires

3 Réponses :

1
votes

vous pouvez définir la variable de chargement et vérifier à chaque fois avant d'exécuter la fonction

var loading = false
container.addEventListener("wheel", (e) => {
  const isScrollingDown = Math.sign(e.wheelDeltaY);

  if(!loading){
      loading = true;
     // call some function once, don't listen for wheel event anymore
     // then listen for event again when done
     // after done
     loading = false
  }
}

1 commentaires

Wow, une implémentation si simple, je suppose que je pensais trop compliquée. Je vais essayer ceci, et si cela fonctionne, je le marquerai comme la bonne réponse, merci.

1
votes

attendez 1 seconde après la première roue:

<div id="container" >wheel</div>

    function handleWheel(e){
          console.log(Math.random())
          document.getElementById("container").removeEventListener("wheel", handleWheel)

          setTimeout(()=>{
            document.getElementById("container").addEventListener("wheel", handleWheel);
          },1000); // return event after 1 second
    }

    
    document.getElementById("container").addEventListener("wheel", handleWheel)

3 commentaires

Je n'ai pas vraiment envie d'utiliser setTimeout pour des trucs comme ça, étant donné que je travaille avec des animations.

"une fois dans une certaine période de temps?" tu as demandé ça

Oui, une certaine période de temps étant le temps après que ma fonction soit terminée. C'est donc en partie une mauvaise description, ma faute, et votre réponse est correcte pour cette partie, mais si vous lisez mieux mon problème, vous verrez que les implémentations ci-dessus sont en fait plus propres.

2
votes

Vous pouvez utiliser la fonction removeEventListener () . documentation

exemple:

let wheelHandler = function(e) {
    toggleListener(wheelHandler, false)
    const isScrollingDown = Math.sign(e.wheelDeltaY);
    // call some function once, don't listen for wheel event anymore
    // then listen for event again when done
    toggleListener(wheelHandler, true)
};
let toggleListener = function(listener, add) {
    if (add) {
        container.addEventListener("wheel", wheelHandler)
    } else {
        container.removeEventListener("wheel", wheelHandler)
    }
}
toggleListener(wheelHandler, true);

0 commentaires