Toastr JS 不会淡出 - Javascript

介绍

Toastr JS 是一个轻量级的 jQuery 插件，用于在网站上显示通知。它可以在屏幕的上、中、下部分显示通知，并提供配置选项来自定义通知的外观和行为。

Toastr JS 在很多项目中都得到了广泛运用，因为它易于使用、功能强大、并且非常灵活。

问题

有些用户在使用 Toastr JS 时遇到了一个问题，就是通知不会淡出。这可能导致通知一直存在于屏幕上，直到用户手动关闭它。

原因

该问题的原因是 Toastr JS 中的两个配置选项 timeOut 和 extendedTimeOut。

• timeOut设置通知自动关闭的时间。默认情况下，它被设置为 5 秒钟。
• extendedTimeOut设置用户在将鼠标悬停在通知上时，通知将继续显示的时间。默认情况下，它被设置为 1 秒钟。

如果将 extendedTimeOut 设置为 -1，则通知将不会自动关闭，即使 timeOut 已经过去了。

解决方案

解决这个问题的最简单方法是将 extendedTimeOut 设置为比 timeOut 短的时间。例如，将 extendedTimeOut 设置为 1000 毫秒，而将 timeOut 设置为 5000 毫秒。这将允许通知在鼠标悬停后保持可见，但在该时间过后自动关闭。

以下是一个示例代码片段：

toastr.options = {
  "timeOut": "5000",
  "extendedTimeOut": "1000"
}

结论

Toastr JS 是一个非常有用的工具，但需要正确配置才能发挥其最大作用。通过将 extendedTimeOut 设置为比 timeOut 更短的时间，即可解决通知不会淡出的问题。