I recently started using javascript, and i made 2 buttons, which if pressed, then i get a push notification on my phone, and i get a notify too ( Request has been sent, OK or ERROR ), but its there until I click X, to close it.
My question is can i give a time limit to it? For example after 10sec it disappears on its own.
If you are referring to the Notification API, then those notifications should (on most browsers) automatically close themselves after about 4 or so seconds. This is stated at the resource below in the section titled âClosing Notificationsâ
There they also advise that you should not dismiss notifications automatically because you want the user to always be in control of when the notifications are closed. Using the close() function also may have the undesired effect of removing the notification before the user sees it and also remove it from further interaction. Something the user may not want.
hey!
No, im not referring to API notifications.
I meant on my site, i send a little notify, when i press a button, it says ârequest has been sentâ then if its all ok then âOKâ
setTimeout(removeNotification(bar), 10 * 1000); // doesn't work
The reason why that doesnât work is that the removeNotification() function gets called right away. Whatâs needed instead is to pass a function to setTimeout, so that that function can then be called at a later time.
We need a function that can remember that element, which involves something called closure. Thatâs where an outer function returns an inner function, resulting in the inner one retaining knowledge of variables from the outer one.
Thatâs achieved by using a callback function. A callback function is best used for that, as that tell us that invoking the removeNotificationCallback() function results in another function.
That removeNotificationCallback function needs to return a function. It is inside of that returned function that we do things with bar, as the el variable.
function removeNotificationCallback(el) {
return function removeNotification() {
el.remove();
}
}
setTimeout(function removeNotificationCallback(bar), 10 * 1000);
That removeNotificationCallback function can be placed in your code outside of the notify() function.
The setTimeout line is best placed immediately after the last line in the notify function.
Thanks for the help!
If i place the âsetTimeout(function removeNotificationCallback(bar), 10 * 1000);â in my code, i doesnt run, and i have no idea why. I placed it after my last line of my notify function.
Meanwhile i figured it out that im gonna need to âelâ define (am i correct? what u sent me is just an example?), but im not sure if i understand this well enough.
function notify(msg, type) {
// msg : notification message
// type : notification type [info | success | error]
// Create bar
let bar = document.createElement("div");
bar.classList.add("bar");
// Set type
if (type) {
let icon = document.createElement("i");
icon.classList.add("icon");
switch (type) {
case 'info':
bar.classList.add("info");
icon.innerHTML = "ℹ";
break;
case 'success':
bar.classList.add("success");
icon.innerHTML = "☑";
break;
case 'error':
bar.classList.add("error");
icon.innerHTML = "☓";
break;
}
bar.appendChild(icon);
}
// Add msg
let content = document.createElement("span");
content.innerHTML = msg;
bar.appendChild(content);
// Add close button
let close = document.createElement("span");
close.innerHTML = "×";
close.classList.add("closebutton");
close.onclick = () => { bar.remove(); };
bar.appendChild(close);
// Display bar
document.getElementById("notifications").appendChild(bar);
}
setTimeout(function removeNotificationCallback(bar), 10 * 1000);
function removeNotificationCallback(el) {
return function removeNotification() {
el.remove();
}
}