toastr js clear 不成功的一个原因和解决办法

最新推荐文章于 2024-03-13 16:27:36 发布

原创最新推荐文章于 2024-03-13 16:27:36 发布 · 593 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文介绍了在使用 toastr.js 进行前端即时通知时遇到的问题，即使用 toasrt.clear() 无法成功关闭消息框。通过分析源码和查阅文档，发现可以设置 force 参数来强制关闭通知。添加 force 参数后，成功解决了问题，确保了通知的正常关闭和管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在系统里使用了 toastr js 即时弹出后台通知。toastr 支持先后显示多个弹出消息，这点很好。然后我又加了自定义样式，使得消息通知更好看些。

我的想法是通知消息显示一段时间后关闭；也可点击关闭按钮，关闭通知并标记已读；或者点击通知消息中的链接查看通知相关的内容，同时关闭通知并标记已读。但通过 toast.clear 方法，不能成功的关闭消息框。

var _toastr_notifications = {};

var _toastr_notification = function(event) {
    var type_key = event.type_key;

    var options = {
            "closeButton": true,
            "iconClass": "toast-note",
            "onCloseClick": function(toast) { 
                // ......
             },
             "onShown": function(toast) {
                 $('.toast a.' + type_key).click(function() {
                    var last_toastr = _toastr_notifications[type_key];
                    toastr.clear( last_toastr );
                 }
              },
              ......
     }

     var last_toastr = toastr["success"](event.toaster_message, event.title, options);
     _toastr_notifications[type_key] = last_toastr;

}

因为页面中可能同时存在多个通知，所以在获得通知事件弹出 toastr 的时候，将它存放到一个 json 对象中，在点击消息内部链接时，取得对应的 toastr 进行处理。

思路应该没错，却屡试不成。

同时，参照 toastr 示例，通过点击页面中的其他按钮，调用 clear 方法，却能成功的关闭消息。问题应该还是事件源位于 toastr 中的缘故。

在 github 它的项目中，搜 clear 问题，发现有一个 force 参数选项，觉得管用，于是一试，确实解决问题。

toastr.clear($toast, { force: true })

查看 toastr.js 源码 ( 2.1.4 ), 可以看出，如果没有强制关闭选项的话，当前获取焦点的 toastr 是不作关闭处理的。

故此，调整一下上面的代码即可

toastr.clear(last_toastr, {force:true} );