如何在浏览器创建的桌面通知上正确设置关闭超时

Question

我正在使用标准Notification API处理我的Web应用程序的桌面通知。 出于初步开发的目的，我使用的是谷歌浏览器。 使用Chrome，当页面创建Notification对象时，通知将永久保留在桌面上。

Notification原型确实有一个.close()方法，该方法允许关闭先前调用过的通知。 我想这个，结合setTimeout函数会在几秒钟之后自动解除通知。 我甚至找到了一个确认我的想法的指南 。

但是，似乎我无法使用setTimeout函数使通知的范围正常工作，并且不会为每个创建的通知正确.close()方法。

这是我尝试过的（我在另一个答案中使用了一些代码作为起点）：

按钮：

<button onclick="notifyMe()">
  Notify me! 
</button>

JavaScript的：

<script>
// request permission on page load
document.addEventListener('DOMContentLoaded', function () {
  if (Notification.permission !== "granted")
    Notification.requestPermission();
});

function notifyMe() {
  if (!Notification) {
    //alert('Desktop notifications not available in your browser. Try Chromium.'); 
    return;
  }

  if (Notification.permission !== "granted")
    Notification.requestPermission();
  else {
    var notification = new Notification('Notification');

    notification.onclick = function () {
        window.focus();
    };

    setTimeout(notification.close, 2000);
    // Result: Uncaught TypeError: Illegal invocation

    // also tried.....

    // setTimeout(notification.close(), 2000);
    // Result: notification stays open forever

    // setTimeout('notification.close', 2000);
    // Result: ReferenceError: notification is not defined

  }

}
</script>

如果有经验的人能帮助我，我将不胜感激。

Answer 1

当我将它包装到一个function() {}它工作：

setTimeout(function() { notification.close() }, 2000);

看到这个小提琴： https ： //jsfiddle.net/drnz12n8/2/