javascript 重复的 toastr 错误消息

Duplicate toastr error messages

提问by Jan Dan

I am using the Toastr 2.1JavaScript library to display transient user input validation error messages. I set preventDuplicatesoption to true. It is not working -- I still see duplicate messages when users click validate button in rapid succession (clicks are faster than 'timeout').

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

Here are my toastr defaults:

这是我的 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
    };
}

Do i need to make any other changes to prevent duplicate error messages?

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

回答by Austin Rodrigues

this may help

这可能有帮助

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

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

回答by Ehsan

I had the same issue and it turned out that toastr preventDuplicates option does not work for array messages (current version 2.1.1). You need to convert the array to string using join.

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

回答by nimo

I believe it's working as expected

我相信它按预期工作

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

Perhaps this is the property you are looking for?

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

preventOpenDuplicates: Prevent duplicates of open toasts.

回答by osheh

I have the same requirements as you. Below is my implementation. See if it can help you.

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

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);
}

The code is to check whether there are existing error toastr which has the same message being displayed. I will only fire the toastr.error if there is no existing instance of the same error on display. Hope this helps. The code can be refactored futher more but I'll leave it like this so that its more easier to understand for others.

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

回答by ankit keshari

Search preventDuplicatesin toastr.min.jsand change

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

preventDuplicates:!1

to

到

preventDuplicates:1

回答by Hassan Saeed

Add preventDuplicates:1 to

将 preventDuplicates:1 添加到

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

回答by Sheena Singla

I was facing the same issue ngx-toastrand resolved by adding the below code in my module file.

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

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

Also, if lazy loading is implemented, then you need to add the same lines of code to your parent module file also as I've added in my app.module.ts

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

回答by zabusa

this may help.

这可能会有所帮助。

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

put it in your toastr config.and it should work.opened toastr is made to 1,and timeout set to 100.

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