点击通知框关闭失效：旧通知无响应或打开新标签问题排查

问题原因 #

你代码里的核心问题是全局变量n被重复覆盖：每次调用notif()函数，都会把新创建的Notification实例赋值给全局的n。当旧通知的点击事件触发时，n已经指向了最新生成的通知实例，所以点击旧通知实际操作的是最新的那个通知，自然就出现了只有最新通知能正常关闭、旧通知无响应或行为异常的情况。

修复方法 #

把n改成notif函数的局部变量，让每个Notification实例都拥有独立的引用，这样点击事件里的n就会指向当前创建的那个通知，点击对应通知就能关闭它自己。

修改后的完整代码：

function notif() {
    // 将n改为函数内的局部变量，不再使用全局变量
    const n = new Notification('the Title', {
        body: 'the Body',
        requireInteraction: false
    });

    setTimeout(() => {
        n.close()
    }, 3000);

    n.onclick = function () {
        n.close();
    };
}

$.ajax({
    dataType: 'json',
    url: "fun.php",
    success: function (response) {
        let data = response.data;
        let data_len = data.length;
        for (var i = 0; i < data_len; i++) {
            notif();
        }
    }
});

额外优化（可选） #

如果需要给每个通知展示不同的标题和内容，可以给notif函数添加参数，适配接口返回的数据：

function notif(notifTitle, notifBody) {
    const n = new Notification(notifTitle, {
        body: notifBody,
        requireInteraction: false
    });

    setTimeout(() => {
        n.close()
    }, 3000);

    n.onclick = function () {
        n.close();
    };
}

$.ajax({
    dataType: 'json',
    url: "fun.php",
    success: function (response) {
        let data = response.data;
        for (var i = 0; i < data.length; i++) {
            // 传入接口返回的对应字段
            notif(data[i].title, data[i].body);
        }
    }
});

内容的提问来源于stack exchange，提问作者saeed saeedi