[Résolu] Interrompre setTimeout ou empêcher son interruption

Bonjour,
Pour une petite présentation en local type kiosque, j'ai une page web avec 6 boutons. Chaque bouton fait afficher une image différente.

J'ai mis un setTimeout pour que chaque image s'affiche 4 sec puis disparaisse.

Mon problème est que si pendant les 4 sec, on appuie sur un autre bouton, l'image change mais la durée de 4 secondes n'est plus respectée.

Comment gérer l'interruption si on touch un autre bouton ou, inversement, bloquer les boutons jusqu'à la fin du setTimeout ?
Merci.

Coucou jlba. Je ne suis pas sur d'avoir comprit, tu pourrais essayer ça ...

var button1 = document.getElementById('button1');
button1.addEventListener('click', function(){
  return false;
});

Je ne suis pas sur, dis moi si je me trompes, mais cela pourrait bloquer les actions entrainés par le bouton.
Bonne journée et code bien (:
Modifié par vzytoi (02 Sep 2020 - 15:02)

Merci Stryk. Le 1er exemple fonctionne parfaitement. Je ne suis pas sûr d'avoir bien saisi la logique mais ça fonctionne.
Modifié par jlba (03 Sep 2020 - 00:51)

En gros quand tu vas cliquer sur le bouton:
_ on clear le timeout
_ on disable toutes les images
_ on enable juste l'image voulue
_ on fait un timeout de 4s pour shooter l'image

Comme ça, à chaque click, ça fait un refresh des images coté DOM et aussi du timeout coté JS

Si tu a fait attention, j'ai déclaré une variable TimeOut à portée globale, ça c'est au cas où tu en ai besoin ailleurs que dans la fonction click.

Merci pour les explications.

Dans le code que j'avais initialement fait, il me manquait le clearTimeout. De fait, quand on cliquait sur un bouton, le timeout se lançait pour 4 secondes. Mais si on cliquait au bout de 2 secondes sur un autre bouton, il ne repartait pas pour 4 secondes.

De plus, je ne suis pas familier avec la boucle pour sélectionner toutes les images.

Pour la variable à portée globale, c'est parce que tu l'as déclarée avec var ou parce qu'elle est en dehors de la constante ?

(J'avoue, je débute en javascript )

jlba a écrit :
Pour la variable à portée globale, c'est parce que tu l'as déclarée avec var ou parce qu'elle est en dehors de la constante ?

Oui parce qu'elle est déclarée en dehors de la fonction, à un niveau supérieur, donc accessible depuis n'importe où !
Techniquement tu peux déclarer une variable globale avec let et const si elle est placée de la même façon.
Tu peux tester en remplaçant par let ça va fonctionner.
Avec const par contre NON, simplement parce que tu ne peux pas réassigner une valeur à une déclaration de const ( c'est une constante donc immuable ).
Là j'ai mis var par habitude

Dans ce code, MyTimeOut est accessible depuis n'importe quel script JS chargé, donc même depuis un autre fichier JS. Ce qui peux poser souci si tu as 2x le même nom de variable par exemple.

Mais pour palier à ce souci tu peux parfaitement "isoler" ton script dans une fonction anonyme comme ceci:

// ici GLOBAL_VAR n'est pas accessible !
// ni sur d'autres scripts

(() => {
     
     let GLOBAL_VAR;

     const toto = function () {
          // ici GLOBAL_VAR est accessible !
     };

})();

Perso je l'utilise beaucoup, en plus des closures, ça permet de bien sécuriser le code