重复的 toastr 错误消息

Duplicate toastr error messages

本文关键字：错误 消息 toastr      更新时间：2023-09-26

我正在使用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.options = {
"preventDuplicates": true,
"preventOpenDuplicates": true
};
toastr.error("Your Message","Your Title",{timeOut: 5000});
我相信

它按预期工作

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

也许这就是您正在寻找的房产？

preventOpenDuplicates: Prevent duplicates of open toasts.

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

我和你有同样的要求。下面是我的实现。看看它是否能帮助你。

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。希望这有帮助。代码可以进一步重构，但我会这样保留它，以便其他人更容易理解。

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

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

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

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

这在 NPM for ngx-toastr 文档中也存在。 您可以将其添加到 app module.ts 中以查看更改。

这可能会

有所帮助。

var config = {
    maxOpened: 1,
    timeOut: 100
}

将其放入 Toastr 配置中。它应该可以工作。打开的 Toastr 设置为 1，超时设置为 100。

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

preventDuplicates:!1

自 

preventDuplicates:1

添加 preventDuplicates：1 到 

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

我在构造函数中添加了这个，它对我有用

this.toastr.toastrConfig.preventDuplicates = true;

试试这个：

toastr.options.preventDuplicates = true;
相关文章：