Attendre la fin des actions, avant de reprendre le cours du programme

Invité · 27/01/2022, 09h25

Bonjour.

J'aimerais pouvoir attendre que les actions dans le addEventListener soit fini avant de re prendre en compte le scroll. Pour se faire j'ai essayer le setTimeout mais ça ne fonctionne pas, probablement car les actions se "superpose", j'ai également pensé à l'asynchrone mais je ne sais pas vraiment comment l'appliquer.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="Swiper1">
        <input type="radio" id="motif0" name="motif" value="motif0">
        <input type="radio" id="motif1"name="motif" value="motif1">
        <input type="radio" id="motif2"name="motif" value="motif2">
        <input type="radio" id="motif3"name="motif" value="motif3" checked="checked">
        <input type="radio" id="motif4"name="motif" value="motif4">
        <input type="radio" id="motif5"name="motif" value="motif5">
        <input type="radio" id="motif6"name="motif" value="motif6">
        <input type="radio" id="motif7"name="motif" value="motif7">
        <input type="radio" id="motif8" name="motif" value="motif8">
 
        <label class="Hid N0" id="0" for="motif0">0</label>
        <label class="N0"id="1" for="motif1">1</label>
        <label class="N0"id="2" for="motif2">2</label>
        <label class="N1"id="3" for="motif3">3</label>
        <label class="N2"id="4" for="motif4">4</label>
        <label class="N3" id="5" for="motif5">5</label>
        <label class="H4d N4" id="6" for="motif6">6</label>
        <label class="Hid" id="7" for="motif7">7</label>
        <label class="Hid" id="8" for="motif8">8</label>
    </div>
 
    <script src="./index.js"></script>
</body>
</html>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
let ID;
let labels = document.querySelectorAll(".Swiper1 label");
let Swiper1 = document.querySelector(".Swiper1");
console.log(Swiper1);
 
classChange = (Id) => {
    document.getElementById(((Id - 3) + labels.length) % labels.length).className = "Hid N0";
    document.getElementById(((Id - 2) + labels.length) % labels.length).className = "N0";
    document.getElementById(((Id - 1) + labels.length) % labels.length).className = "N1";
    document.getElementById(Id).className = "N2";
    document.getElementById(((Id + 1) + labels.length) % labels.length).className = "N3";
    document.getElementById(((Id + 2) + labels.length) % labels.length).className = "N4";
    document.getElementById(((Id +3) + labels.length) % labels.length).className = "Hid N4";
};
 
labels.forEach( x => {
    x.addEventListener("click", e => {
        ID = e.target.id
        classChange(ID);
    })
});
 
Swiper1.addEventListener("wheel", e => {
    ID = document.querySelector(".N2").id;
    if (e.wheelDeltaY < 0){
        ID = (ID + 1) % labels.length;
    }else{
        ID = ((ID + labels.length) - 1) % labels.length;
    };
 
    window.setTimeout( classChange(ID),1000);
});

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
body {
    display : flex;
    flex-direction:  column;
    align-items:  center;
}
 
.Swiper1 {
    width: 500px;
    height: 200px;
    position: relative;
    display: flex;
    flex-direction: row;
    perspective: "3D";
}
 
.Swiper1:hover {
    background-color: aquamarine;
}
 
input[type="radio"] {
    display: none;
}
 
.Swiper1 label {
    position: absolute;
    display:block;
    padding:  20px;
    font-size: 18px;
    text-align: center;
    width: 20px;
    height: 20px;
    margin : 5px;
    background: rgb(175, 175, 175);
    border-radius: 5px;
    transition: ease-in-out 0.2s;
}
 
.Hid {
    visibility: hidden;
}
 
.N0 {
  transform: translateX(-100%) scale(0.6); 
  z-index: 0;
}
 
.N1{
    transform: translateX(-60%) scale(0.8);
    z-index: 1;
}
 
.N2{
    z-index: 2;
}
 
.N3{
    transform: translateX(60%) scale(0.8);
    z-index: 1;
}
 
.N4{
    transform: translateX(100%) scale(0.6);
    z-index: 0;
}

Certaine chose ne son pas encore bien optimiser mais la seul réponse que je cherche c'est comment régler les bugs d'animation lorsqu'on spam le scroll sur le Swiper.

Merci d'avance de vos réponse.

Attendre la fin des actions, avant de reprendre le cours du programme

JavaScript

Discussions similaires

Partager

Partager