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 :)
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(() => {
// ...
});
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();