Partage

Probleme avec Setinterval

19 décembre 2017 à 11:31:46

Bonjour cela fait plusieurs temps que je recherche un probleme vis a vis de SetInterval qui fait trembler ma page litteralement . En somme, mon but est de scroller la page automatiquement vers la partie suivante .

Que se passe t- il ?

Merci d'avance

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>Structure</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
         
        #box1 {
            width: 100%;
            height: 1050px;
            background-color: darkcyan;
        }
         
        #box2 {
            width: 100%;
            height: 1050px;
            background-color: darkgray;
        }
         
        #box3 {
            width: 100%;
            height: 1050px;
            background-color: darksalmon;
        }
    </style>
</head>
 
<body>
    <div id="box1" onmousewheel="checkpoint('box1')"></div>
    <div id="box2" onmousewheel="checkpoint('box2')"></div>
    <div id="box3" onmousewheel="checkpoint('box3')"></div>
    <script>
        function checkpoint() {                                                           
            this.addEventListener('mousewheel', sens, false);
        };
 
        function verif(x) {                                                            
            x ? alert(x) : alert('good');
        }
 
        function sens(e) {                                                        
            var delta = e.wheelDelta;
            if (delta < 0) compare = 1;
            if (delta > 0) compare = 2;
            roulette(compare);
        }    
         
        function roulette(x) {                                                            
            var targetYa = document.getElementById("box1").offsetTop;
            var targetYc = document.getElementById("box3").offsetTop;
            var targetYb = document.getElementById("box2").offsetTop;
            var currentY = window.pageYOffset;
            var animator = setInterval(function () {
                roulette(x);
            }, 10);
          
            if (compare == 1) {
                if ((currentY >= 0) && (currentY < 1060)) {
                    if (currentY < (targetYb)) {
                        currentY = currentY + 10;
                        window.scrollTo(0, currentY);
                         
                    }
                    else if (currentY > targetYb) {
                       
                         
                        clearInterval(animator);
                        animator = null;
                        compare = 0;
 
                    }
                }
                if ((currentY > 1200) && (currentY < 3000)) {
                    if (currentY < (targetYc - 10)) {
                        currentY = currentY + 10;
                        window.scrollTo(0, currentY);
                    }
                    else {
                        clearInterval(animator);
                    }
                }
            }
        }
    </script>
</body>
 
</html>

-
Edité par Audric Larose 19 décembre 2017 à 11:40:48

LCaba

20 décembre 2017 à 19:28:26

Salut, chaque fois que roulette() est appelée, tu programme un setInterval qui va appeler roulette() toutes les 10ms. Toutes les 10ms, un nouveau setInterval va donc programmer un appel de roulette() toutes les 10ms. Donc au bout d'une seconde, ton script lance 100 fois la fonction roulette() par seconde...

Ton setInterval doit pas être dans la fonction roulette.

Autre chose étrange : ligne 34-36, à chaque mousewheel, addEventListener va ajouter un gestionnaire d'événement qui va appeler sens() à chaque... mousewheel. Ca n'a aucun sens, si tu scroll de sorte que 10 mousewheel sont déclenché, alors sens va être appelé 10 fois lors que prochain mousewheel.

-
Edité par LCaba 20 décembre 2017 à 19:29:26

Cabinet vétérinaire à Angers

Audric Larose

21 décembre 2017 à 11:37:33

Bonjour , un grand MERCI , ça m'aide enormement. Pour la deuxième partie de ta remarque avec la fonction Sens() , mon idée c'est qu'a chaque utilisation de la roulette, il doit capter le sens du scroll pourquoi ce n'est pas cohérent ?

LCaba

21 décembre 2017 à 12:54:43

Le problème c'est qu'à cause de tes onmousewheel la fonction checkpoint est appelée à chaque fois qu'il y a un scroll

Chaque fois que checkpoint est appelée tu ajoutes un gestionnaire d'événements qui appelle la fonction sens à chaque événement mousewheel

Du coup tes gestionnaire d'événements s'accumulent

Cabinet vétérinaire à Angers

Audric Larose

21 décembre 2017 à 21:35:45

Merci beaucoup j'ai pu modifié mon code et j'ai aussi fait une découverte de folie : un scroll = 18 clicks !!!!

J'ai fais un test sur la console.log et je mesure tout ( sacrée fonction que je ne connaissais pas ) et la je me rends compte qu'avec addeventlistener("click",roulette,false); tout est nickel alors qu'avec la même chose avec le mousewheel ça fait les tremblement car c'est du au faite que mon événement se déclenche 18 fois de suite...

Je dois trouver un moyen de faire pause au premier declenchement

LCaba

22 décembre 2017 à 0:29:17

Regarde par ici : https://openclassrooms.com/forum/sujet/limiter-une-ecoute-devent-a-1-fois-par-seconde

Cabinet vétérinaire à Angers

Audric Larose

26 décembre 2017 à 22:08:46

Merci beaucoup pour cette reponse !! ça a en partie resolu mon probleme et m'a fait faire un grand pas

Audric Larose

28 décembre 2017 à 10:22:56

Salut du coups j'ai simplifié ou revue le probleme autrement mais la encore ca bloque pour une option que je ne vois pas. C'est ma derniere ligne droite.

La ça fonctionne tres bien jusqu'au deuxieme tour ou lanimation ne marche plus du tout . Pourquoi? J'avoue ne pas comprendre

<!DOCTYPE html>

<html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

body {

background-color: forestgreen;

}

#bloca {

position: absolute;

top: 0%;

width: 100%;

height: 1000px;

background-size: cover;

background-color: black;

display: block;

margin: auto;

z-index: 2;

}

#blocb {

position: absolute;

top: 0;

width: 100%;

height: 1000px;

background-size: cover;

background-color: lightgoldenrodyellow;

display: block;

margin: auto;

z-index: 1;

}

#blocc {

top: 0%;

position: absolute;

width: 100%;

height: 1000px;

background-size: cover;

background-color: lightcoral;

display: block;

margin: auto;

z-index: 0;

}

#containder {

border: 5px solid black;

margin: 0px;

}

.slider {

-webkit-animation-name: slider;

-webkit-animation-duration: 1.5s;

animation-name: slider;

animation-duration: 3.5s;

}

@keyframes slider {

0% {

top: 1000px;

}

100% {

top: 0;

}

</style>

</head>

<body>

<a id="containder">

<div id="bloca"></div>

<div id="blocb"></div>

<div id="blocc"></div>

</a>

<SCRIPT>

var fdelta = 0;

var ind = 0;

var fin = 0;

var blocks = document.getElementsByTagName("div");

for (i = 0; i < blocks.length; i++) {

blocks[i].addEventListener('mousewheel', function () {

clic()

}, false);

}

var topa=window.getComputedStyle(blocks[0],null).getPropertyValue("top");

function clic() {

var depart = Date.now();

for (i = 0; i < blocks.length; i++) {

blocks[i].style.top = "0";

}

if ((depart > 1000 + fin) && (Math.abs(event.deltaY) > fdelta)) {

ind = ind + 1;

if (ind > (blocks.length - 1)) {

blocks[0].style.zIndex = "2";

blocks[1].style.zIndex = "0";

blocks[2].style.zIndex = "1";

ind = 0;

}

blocks[ind].style.zIndex = "3";

blocks[ind].classList.add("slider");

alert(topa);

fin = depart;

}

fdelta = Math.abs(event.deltaY);

}

</SCRIPT>

</body>

</html>

LCaba

28 décembre 2017 à 12:07:06

Faut que tu repostes ton code correctement la j'arrive 0as à le lire sur mobile j'ai pas la fin des lignes

Cabinet vétérinaire à Angers

Audric Larose

28 décembre 2017 à 14:01:53

ça marche !

j'ai mis un lien fiddle

Voici le lien pour voir le code en direct !

https://jsfiddle.net/Barsala/2rxcatdL/#&togetherjs=SQ1am89EgD

<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: forestgreen;
        }
        
        #bloca {
            position: absolute;
            top: 0%;
            width: 100%;
            height: 1000px;
            background-size: cover;
            background-color: black;
            display: block;
            margin: auto;
            z-index: 2;
        }
        
        #blocb {
            position: absolute;
            top: 0;
            width: 100%;
            height: 1000px;
            background-size: cover;
            background-color: lightgoldenrodyellow;
            display: block;
            margin: auto;
            z-index: 1;
        }
        
        #blocc {
            top: 0%;
            position: absolute;
            width: 100%;
            height: 1000px;
            background-size: cover;
            background-color: lightcoral;
            display: block;
            margin: auto;
            z-index: 0;
        }
        
        #containder {
            border: 5px solid black;
            margin: 0px;
        }
        
        .slider {
            -webkit-animation-name: slider;
            -webkit-animation-duration: 1.5s;
            animation-name: slider;
            animation-duration: 3.5s;
        }
        
        @keyframes slider {
            0% {
                top: 1000px;
            }
            100% {
                top: 0;
            }
        }
    </style>
</head>

<body>
    <a id="containder">
        <div id="bloca"></div>
        <div id="blocb"></div>
        <div id="blocc"></div>
    </a>
    <SCRIPT>
        var fdelta = 0;
        var ind = 0;
        var fin = 0;
        var blocks = document.getElementsByTagName("div");
        for (i = 0; i < blocks.length; i++) {
            blocks[i].addEventListener('mousewheel', function () {
                clic()
            }, false);
        }
        var topa = window.getComputedStyle(blocks[0], null).getPropertyValue("top");

        function clic() {
            var depart = Date.now();
            if ((depart > 1000 + fin) && (Math.abs(event.deltaY) > fdelta)) {
                ind = ind + 1;
                if (ind > (blocks.length - 1)) {
                    blocks[0].style.zIndex = "2";
                    blocks[1].style.zIndex = "0";
                    blocks[2].style.zIndex = "1";
                    ind = 0;
                    blocks[i].removeAttribute("slider");
                }
                blocks[ind].style.zIndex = "3";
                blocks[ind].classList.add("slider");
                fin = depart;
            }
            fdelta = Math.abs(event.deltaY);
        }
    </SCRIPT>
</body>

</html>

merci enormement !!

Audric Larose

2 janvier 2018 à 17:44:37

Bonjour du coups?

LCaba

3 janvier 2018 à 14:50:15

salut

je comprends pas ton code, du coup je sais pas quoi répondre. tu dois mieux compartimenter ton code. par exemple ici, tu dois organiser ton code en 2/3 parties :

une fonction qui prends en argument l'index d'une page et qui affiche cette page
une fonction pour naviguer d'une page à la précédente ou à la suivante.
une fonction qui gère le scroll

Premièrement, ton code sera plus compréhensible par les autres mais aussi par toi !

Deuxièment si tu veux ajotuer une autre méthode de navigation (par exemple au clavier), c'est un jeu d'enfant alors que c'est ingérable avec ton code

Voici à quoi devrait ressembler ton code, schématiquement :

function affichePage(index) {
  /*
    ici le code pour faire une transition
    entre la page actuelle et la page
    ayant l index index.
  */
}

var current = 0
var nombreDePages = 3

function navigation(direction) {
  if (direction === 'next') {
    current++
  } else if (direction === 'prev') {
    current--
  }
  // gestion des cas hors-limite :
  current = current < 0 ?             nombreDePages - 1 
          : current >= nombreDePage ? 0
          :                           current
                                     
}

var lastDelatY = 0
function handleMouseWheel(e) {
  if (Math.abs(e.deltaY) >= Math.abs(lastDeltaY)) {
    navigation(e.deltaY > 0 ? 'next' : 'prev')
  }
}
document.addEventListener('mousewheel', handleMouseWheel)

-
Edité par LCaba 3 janvier 2018 à 14:51:22

Cabinet vétérinaire à Angers