Notification Delay – JavaScript – SitePoint Forums

0

hello guy

I recently started using javascript, and I created 2 buttons, which if I press it, then I get a push notification on my phone, and I also get a notification (the request was sent, OK or ERROR), but it’s there until I click X , to close it.
My question is, can I give it a time frame? For example after 10sec it disappears on its own.

Thanks in advance


If you refer to the notification API, these notifications should (on most browsers) automatically close after about 4 seconds or so. This is stated in the resource below in the section titled “Closure Notifications”

There they also advise you not to dismiss notifications automatically because you want the user to always control when notifications are closed. By using the close() The feature can also have the undesirable effect of removing the notification before the user sees it and also removing it from any further interaction. Something the user may not want.

I hope that’s what you were referring to.

Hey!
No, I’m not referring to API notifications.
I meant on my site I send a small notification, when I press a button it says “the request has been sent” then if everything is ok then “OK”

I can send you my code if you want
.

@norbertkoteles10 Rather than send, could you share a link or sample of the code here?

This way others can contribute. It may also be useful for other members who are having the same problem.

Yes, there is definitely a way.

When showing the notification, use setTimeout with a 10 second delay, where removeNotification is a function.

setTimeout(removeNotification, 10 * 1000);

Or, if you have multiple notifications, you can use a function to provide different information, for example:

setTimeout(function removeRequestNotification() {
  removeNotification("#request");
}, 10 * 1000);

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

Hey, where do I put this?

Well, you use an element called bar.

It is not possible to do the following:

setTimeout(removeNotification(bar), 10 * 1000); // doesn't work

The reason this doesn’t work is that the removeNotification() function is called immediately. What is needed instead is to pass a function to setTimeout, so that this function can then be called later.

We need a function that can remember this element, which involves something called closure. This is where an outer function returns an inner function, causing the inner function to retain knowledge of the outer function’s variables.

This is achieved by using a callback function. A callback function is best used for this, as it tells us that calling the removeNotificationCallback() function results in another function.

setTimeout(function removeNotificationCallback(bar), 10 * 1000);

This removeNotificationCallback function must return a function. It’s inside this returned function that we do things with bar, like the el variable.

function removeNotificationCallback(el) {
  return function removeNotification() {
    el.remove();
  }
}
setTimeout(function removeNotificationCallback(bar), 10 * 1000);

This removeNotificationCallback function can be placed in your code outside of the notify() function.
It is best to place the line setTimeout immediately after the last line of the notification function.



2 likes

Share.

Comments are closed.