Bonsoir, 

Je souhaite limiter une écoute d'event à 1 fois par seconde. Mais rien n'y fait. Même avec un removeEventListener après l'écoute de mon event, si je scroll deux fois très fort avec mon trackpad dans un court laps de temps, mon console.log m'affichera le 2e scroll avec un peu de délais (car wheel continue de tourner longtemps). Ce que je cherche à faire c'est couper ce "wheel", pouvez-vous m'aider ?

ps : je ne souhaite pas utiliser d'addEventListener sur "scroll" car j'utilise un overflow:hidden indispensable sur mon body.

let userScrolled = ""
let canScroll = true

//Si scroll vers le bas
const downScroll = () => {
  console.log("down")
}

const upScroll = () => {
  console.log("up")
}

//Détection du scroll
const scrolling = () => {
  window.addEventListener(
    "wheel", //Parameter for a overflow:hidden on the body
    (e) => {
      if (canScroll) { 
        e.deltaY < 0 ? userScrolled = "down" : userScrolled = "up" //If there is scoll up or down...
        userScrolled == "down" ? downScroll() : upScroll() //Launch function a ou b
        canScroll = false //Disable the scroll
        window.setTimeout(() => { //Allows the scroll after 1500ms
          canScroll = true
          window.removeEventListener("wheel", scrolling, false)
        }, 1500)
      }
    }
  )
}

scrolling()

-
Edité par Ricky-T 18 décembre 2017 à 22:59:54

Salut

Tu peux pas annuler le wheel, c'est indépendant de javascript, c'est la souris qui le déclenche.

Par contre tu peux comparer la propriété deltaY d'un wheel  à l'autre : dès que tu relaches le scroll, le deltaY diminue.

Voilà un exemple d'application : tu ne peux augmenter ou diminuer le chiffre que toutes les secondes, et si le scroll a encore de l'élan au bout d'une seconde, ça n'a aucun effet : https://jsfiddle.net/nkh1104e/1/ 

-
Edité par LCaba 18 décembre 2017 à 23:53:28

Merci beaucoup pour cette grande aide ! 

Ce que je ne suis pas sûr de comprendre très bien, c'est la condition if dans le jsfiddle.

Voici ce que je comprends avec mon console.log : à la fin de la boucle, lastTime+1000 devient plus grand que time, puis time augmente ?

Tandis qu'à la sortie de la condition, Math.abs(lastDeltaY) devient égal à Math.abs(e.deltaY) puis retourne à 0 ? 

L'instruction if contient 2 opérandes qui doivent être vrais tous les 2 pour pouvoir modifier à nouveau la valeur du nombre.

Le premier oblige un delatY supérieur à celui du dernier événement wheel en valeur absolue. Cela permet d'ignorer tous les wheel déclencher avec l'élan du trackpad, car dès qu'on relâche le pad, le deltaY diminue. 

Le second opérande n'est vrai que si le délai deouis la dernière modification est supérieure à 1000ms. 

Si ces 2 opérandes sont vrais la condition est vérifiée, alors on peut modifier le nombre (de + 1 ou -1 en fonction du signe de deltaY.

La variable lastDelaY est réassignée à chaque événement wheel à la fin de la fonction. Avant ça, elle représente donc la valeur de e.deltaY lors du précédent wheel.

La variable lastTime enregistre le timestamp de la dernière modification.

Remarque y a une erreur dans mon algorithme : il faut un signe >= à la place de >

C'est corrigé avec un peu de ménage dans l'Indentation : https://jsfiddle.net/nkh1104e/4/ 

-
Edité par LCaba 19 décembre 2017 à 7:58:19

Je te conseil ce tutoriel et plus particulièrement sur l'utilisation du throttle :

https://www.grafikart.fr/tutoriels/javascript/debounce-throttle-642

Merci beaucoup pour votre aide ! A priori le throttle n'est pas adapté à ce que je cherche car si je fais plusieurs scroll dans un temps réduit, ceux qui suivent le 1e apparaitront après un delay

Du test que je viens de faire ça semble bon (si j'ai bien compris ton soucis) : https://jsbin.com/curabilimu/edit?html,js,output

J'ai utilisé lodash pour aller plus vite mais le principe reste le même.