Promise JS setTimeout

Par Alex_13, il y a 4 ans

Javascript

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

Orivoir21, il y a 4 ans

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, il y a 4 ans

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')

MickaelTD, il y a 4 ans

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();