Bonjour à tous !

J'essaie actuellement d'afficher une notification au bout de 30 sec sur la page, et dès que la notification est affichée, de la supprimer après 2 min, si aucune interraction utilisateur.

Voici mon code pour l'afficher ( Limite, pas besoin de le montrer ^^)

 setTimeout(() => {
       showToast(title, content, time, img)
}, 2000)

Je voudrais y intégrer un .then() mais je n'ai aucune idée de comment faire.

Merci d'avance :)

3 réponses


Bonjour, c'est un petit peu confus.
Actuellement avec ce snipet de code que tu montres tu appel une fonction showToast après un délai de 2 secondes (l'unité de temps passer à setInterval sont des millisecondes)
Je ne suis pas sur de comprendre concrètement ce que tu veux dire par intégrer un .then mais si tu veut juste faire un appel à setTimeout sous forme de Promise tu peux encapsuler ton code dans une fonction qui renvoit la Promise du genre:

function setTimeoutPromise() {

    return new Promise((resolve, reject) => {
         setTimeout(() => {
            showToast(title, content, time, img);

            resolve();
        }, 2000)

    })

}

setTimeoutPromise()
.then(() => {
    // ...
});
Alex_13
Auteur

Salut Orivoir21 !

Merci de ta réponse rapide,

Voici ce que j'ai fait:

    function LoadToast(...) {

        if (!...) {
            let bodyNotificationContent = document.querySelector('#toast-content').innerHTML;

            $.get(`...`, function (data) {

               ...
               ...
               ...

              function setTimeOutPromise(){
                  return new Promise((resolve, reject) => {
                      setTimeout(() =>
                      {
                          showToast(title, content, time, img)
                          resolve();
                      }, 2000);
                  })
              }
              return setTimeOutPromise.resolve()

            });

        }

    }

        LoadToast(...)
        .then(() => {
        setTimeout(hideToast, 3000)
    })

Avant, lorsque je ne mettais que le showToast, il apparaissait, mais plus maintenant...

En erreur console j'ai un Cannot read properties of undefined (reading 'then')

Hello, tu peux peut-être faire ça différement, voici une solution à toi de voir si cela te convient

<div id="snackbar"></div>
#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
}

#snackbar.show {
  visibility: visible;
  animation: fadein 0.5s;
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
  const body = document.getElementById("body");
  const toast = document.getElementById("snackbar");
  const sartToast = 30000
  const endToast = 60000 * 2

// TU CHECK N'IMPORTE QUEL CLICK SUR LE BODY POUR SAVOIR SI L'UTILISATEUR EST ACTIF, TU POURRAIS AUSSI ECOUTER LE SCROLL
  body.addEventListener("click", clearToastIfOpen);
// body.addEventListener("scroll", clearToastIfOpen);

// SI QUELQU'UN CLIQUE OU SCROLL TU CHECK SI UN TOAST EST ACTIF SI OUI TU LE SUPPRIME
  function clearToastIfOpen() {
    if (toast.className.includes("show")) {
      // TU PEUX PLACER UNE AUTRE CLASS CSS AU LIEU DE "" POUR ANIMER TON TOAST EN SORTIE
      toast.className = toast.className.replace("show", ""); 
    }
  }

// AFFICHE UN TOAST APRES 30 SEC
  function loadToast() {
    setTimeout(function () {
    // TU METS TON TEXTE ICI
      toast.innerHTML = "Le texte que tu souhaite afficher";
      toast.className = "show";
      // ON TRIGGER DIRECTEMENT LA FONCTION QUI VA FERMER LE TOAST APRES 2 MIN
      clearToastAfter2Min();
    }, sartToast);
  }

// FERME LE TOAST APRES 2 MIN
  function clearToastAfter2Min() {
    setTimeout(function () {
      // TU PEUX PLACER UNE AUTRE CLASS CSS AU LIEU DE "" POUR ANIMER TON TOAST EN SORTIE
      toast.className = toast.className.replace("show", "");
    }, endToast);
  }

  loadToast();