如何在显示新的 toastr 之前清除之前的 toastr 并在它们之间设置超时？

Question

我正在使用 Angular toastr，并且我在隐藏前一个 toastr 和显示下一个 toastr 之间遇到了延迟。一次只能有一个烤面包机。我隐藏和显示它，但没有视觉差异，并且 toast 消息仍然相同，用户无法区分哪个是上一个，哪个是下一个 toast。我用两个函数来解雇他们。任何帮助将不胜感激。

这是我的设置：

        autoDismiss: true,
        maxOpened: 2,
        newestOnTop: true,
        extendedTimeOut: 1000,
        tapToDismiss: false,
        timeOut: 5000

Answer 1

立即删除当前的 toast，而不使用动画

toastr.remove()

使用动画删除当前的 toast

toastr.clear()

所有内容都在 github

上提及

Answer 2

设置

maxOpened: 1

在 toastrConfig.这将防止吐司堆叠，并且一旦第一个吐司过期，第二个吐司就会出现。

Answer 3

只需在调用 toastr 之前使用它即可。 它将使用动画删除当前的 toast

toastr.clear()

function CopyVideoUrl(row_id) {
  toastr.clear(); // Remove the current toasts
  
  row_id.select();
  row_id.setSelectionRange(0, 99999); /*For mobile devices*/
  
  document.execCommand("copy");
  toastr.success('Reference Url has been copied.', 'Success', {
    timeOut: 3000
  });
}

<!-- Use jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Use Toastr in Head -->
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

<input readonly type="text" class="form-control" id="input_url" onmousedown="CopyVideoUrl(input_url)" value="https://www.google.com/">