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

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:

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:

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:

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.