重复的 toastr 错误消息

Posted 2023-05-08

【中文标题】重复的 toastr 错误消息

【英文标题】：Duplicate toastr error messages

【发布时间】：2015-02-06 13:17:32

【问题描述】：

我正在使用Toastr 2.1 javascript 库来显示瞬时用户输入验证错误消息。我将preventDuplicates 选项设置为true。它不起作用 - 当用户快速连续单击验证按钮时，我仍然看到重复的消息（点击比“超时”更快）。

这是我的 toastr 默认设置：

function getDefaults() 
    return 
        tapToDismiss: true,
        toastClass: 'toast',
        containerId: 'toast-container',
        debug: false,

        showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery
        showDuration: 300,
        showEasing: 'swing', //swing and linear are built into jQuery
        onShown: undefined,
        hideMethod: 'fadeOut',
        hideDuration: 1000,
        hideEasing: 'swing',
        onHidden: undefined,

        extendedTimeOut: 1000,
        iconClasses: 
            error: 'toast-error',
            info: 'toast-info',
            success: 'toast-success',
            warning: 'toast-warning'
        ,
        iconClass: 'toast-info',
        positionClass: 'toast-top-right',
        timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky
        titleClass: 'toast-title',
        messageClass: 'toast-message',
        target: 'body',
        closehtml: '<button>&times;</button>',
        newestOnTop: true,
        preventDuplicates: true,
        progressBar: false
    ;

我是否需要进行任何其他更改以防止出现重复的错误消息？

【问题讨论】：

为什么用户快速连续点击验证按钮？

用户可以进行更改并再次单击验证按钮，此持续时间可能比 toastr 消息超时时间短。

这里有什么更新吗？你设法解决了这个问题吗？ CodeSeven 上的演示运行良好，但我似乎也无法在我的项目中使用它。

【参考方案1】：

这可能会有所帮助

toastr.options = 
"preventDuplicates": true,
"preventOpenDuplicates": true
;

toastr.error("Your Message","Your Title",timeOut: 5000);

【讨论】：

是的，这对我有帮助：this.toastr.toastrConfig.preventDuplicates = true;

【参考方案2】：

我相信它按预期工作

preventDuplicates: Prevent duplicates of the **last toast**.

也许这就是您要找的房产？

preventOpenDuplicates: Prevent duplicates of open toasts.

【讨论】：

对于其他想知道为什么这不在他们的 toastr.min.js 文件中的人，这似乎只在 toastr 的 angular-js 端口中，而不是 vanilla

【参考方案3】：

我遇到了同样的问题，结果发现 toastr preventDuplicates 选项不适用于数组消息（当前版本 2.1.1）。您需要使用 join 将数组转换为字符串。

【参考方案4】：

我的要求和你一样。下面是我的实现。看看能不能帮到你。

function hasSameErrorToastr(message)

  var hasSameErrorToastr = false;

  var $toastContainer = $('#toast-container');
  if ($toastContainer.length > 0) 
    var $errorToastr = $toastContainer.find('.toast-error');
    if ($errorToastr.length > 0) 
      var currentText = $errorToastr.find('.toast-message').text();
      var areEqual = message.toUpperCase() === currentText.toUpperCase();
      if (areEqual) 
        hasSameErrorToastr = true;
      
    
  

  return hasSameErrorToastr;


//Usage
var message = 'Error deleting user';
if (hasSameErrorToastr(message)) 
    toastr.error(message, title, errorToastrOptions);

该代码是检查是否存在显示相同消息的错误toastr。如果没有显示相同错误的现有实例，我只会触发 toastr.error。希望这可以帮助。代码可以进一步重构，但我会这样保留它，以便其他人更容易理解。

【参考方案5】：

这可能会有所帮助。

var config = 
    maxOpened: 1,
    timeOut: 100

把它放在你的 toastr 配置中。它应该可以工作。打开的 toastr 设置为 1，超时设置为 100。

【参考方案6】：

在toastr.min.js中搜索preventDuplicates并更改

preventDuplicates:!1

到

preventDuplicates:1

【讨论】：

请不要在压缩文件中编辑代码，您应该使用类似toastr.options.preventDuplicates: true; 的选项来代替。如果您编辑文件中的代码，然后您将更新该文件，您的代码将被删除。在这种情况下，基本上你正在编辑核心文件。

【参考方案7】：

我遇到了同样的问题 ngx-toastr，并通过在我的模块文件中添加以下代码来解决。

ToastrModule.forRoot(
  maxOpened: 1,
  preventDuplicates: true,
  autoDismiss: true
)

另外，如果实现了延迟加载，那么您需要将相同的代码行添加到您的父模块文件中，就像我在 app.module.ts 中添加的那样

【参考方案8】：

将 preventDuplicates:1 添加到

toastr.options = 
  maxOpened: 1,
  preventDuplicates:1,
  autoDismiss: true
;

【参考方案9】：

imports: [
  ToastrModule.forRoot(
    timeOut: 10000,
    positionClass: 'toast-bottom-right',
    preventDuplicates: true,
  ),
],

这也出现在 npm 的 ngx-toastr 文档中。您可以将其添加到您的应用程序 module.ts 中以查看更改。