11521 sujets

JavaScript, DOM et API Web HTML5

Gestion de delay

Bonjour à tous,
ma question concerne la gestion d'un délai, ou plutot d'un timer...

Voilà ce que j'ai, et ce que je voudrais faire :
- J'ai 3 bouttons (produit, ajout et sup)
- par defaut, seul "produit" est visible.
- au clic de "produit" j'affiche les deux autres (ajout et sup)
- un .delay permet de les masquer au bout de 3sec.

voici le code JS : 
// je clique sur le produit   
$('.produit').click(function() {

//afficher cta
    $('.ajout').addClass('show');
    $('.sup').addClass('show');
   
//masquer cta avec delay  
    $('.ajout')
        .delay(3000)
        .queue(function(timerA){ 
        $('.ajout').removeClass('show');
        timerA();
        });
    $('.sup')
        .delay(3000)
        .queue(function(timerB){ 
        $('.sup').removeClass('show');
        timerB();
        });
});


j'aimerai pouvoir maitriser le delay dans l'hypothse d'un clic sur "ajout" ou sur "sup" :
- je clic sur "produit"
- "ajout" et "sup" s'affiche pour 3sec.
- je clic sur "ajout" (par exemple). Et le delai de masquage reviens à 0, attendant 3 secondes pour se masquer.

Apres mes recherches, je me dit que .delay n'est peut etre pas la bonne manniere... et qu'un timer, ou setInterval serait plus judicieux. Mais j'avoue ne reussir à l'appliquer.

Une idée? une aide?
Merci d'avance
Salut

J'ai réalisé et testé cet exemple en JS :

[id^="btn"] {
    margin-right: 1rem;
}

.hideBtns {
    display: none;
}



<button id="btnProduit" type="button">Produit</button>
<button id="btnAjout" type="button">Ajout</button>
<button id="btnSup" type="button">Sup</button>



window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible

    // début code du test

    let 
        timeOuthandler = null;
    
    const
        elemBtnProduit = document.querySelector('#btnProduit'),
        elemBtnAjout = document.querySelector('#btnAjout'),
        elemBtnSup = document.querySelector('#btnSup'),
        hideBtns = () => {
            timeOuthandler = setTimeout(() => {
                elemBtnAjout.classList.toggle('hideBtns');
                elemBtnSup.classList.toggle('hideBtns');
            }, 3000);
        };
    
    elemBtnAjout.classList.toggle('hideBtns');
    elemBtnSup.classList.toggle('hideBtns');

    elemBtnProduit.addEventListener('click', ev => {
        elemBtnAjout.classList.toggle('hideBtns');
        elemBtnSup.classList.toggle('hideBtns');
        hideBtns();
    }, {
        capture: false,
        passive: true,
        once: false
    });

    elemBtnAjout.addEventListener('click', ev => {
        if (timeOuthandler){
            clearTimeout(timeOuthandler);
            hideBtns();
        }
    }, {
        capture: false,
        passive: true,
        once: false
    });

    elemBtnSup.addEventListener('click', ev => {
        if (timeOuthandler){
            clearTimeout(timeOuthandler);
            hideBtns();
        }
    }, {
        capture: false,
        passive: true,
        once: false
    });

    // fin code du test

}, {
    capture: false,
    passive: true,
    once: false
});

Modifié par danielhagnoul (13 Jul 2018 - 20:02)
Meilleure solution
Hello,

je viens également de tester ce que tu proposes,
ca fonctionne nickel !!

Il me reste à comprendre la logique, car pour l'instant, j'ai juste fait un gros copier/coller Smiley cligne
je vais ensuite le passer en jQuery (histoire d'etre dans la même logique que le reste de mon code)

Merci beaucoup !
Sujet clos
Aller à