javascript - 自己的alert被执行了两次

Question

我有一个小类，我可以用它制作和显示警报。警报的持续时间和内容通过类函数提供给类并受控。

当我触发 toast 时，它会在 durationTime 后再次正确显示和隐藏。但随后警报再次出现并在不久之后再次隐藏。在代码的任何部分，我都没有调用警报两次。

问题:我想这可能与上下文和时间安排有关。但是我对此没有什么经验。有人可以帮帮我吗？提前致谢!最大

class ToastHawaii {
  constructor(config = {}) {
    this.duration = typeof(config.duration) == 'undefined' ? 1000 : config.duration;
    this.toastContainer = config.toastContainer;
  }

    makeToast(d) {
        const html = `<div class="toast">
          <div>${d.title}</div>
          <div class="right">${d.content}</div>
        </div>`;
        this.toastContainer.innerHTML = html;
        this.toastContainer.classList.add("show");
        setTimeout(() => { 
          this.toastContainer.classList.remove("show");
        }, this.duration);
    }
}

const mA = new ToastHawaii({
  duration: 4000,
  toastContainer: document.querySelector('#myAlertContainer')
});

const content = `ICON`;

document.querySelector("button").addEventListener('click', () => {
  mA.makeToast({
    title: "hello", 
    content: content 
  });  
})

#myAlertContainer {
  position: fixed;
  left: 0%;
  top: 30px;  
  visibility: hidden;
  width:100%;
  z-index: 1;
  height:60px;
}
.toast {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  background: gray;
  color: #000;
  height:100%;
  padding: 0 16px;
  font-size: 0.8rem;
  font-weight: bold;
  margin: 0 auto;
  max-width: 350px;
}

.right {
  display: flex;
  gap: 5px;
  align-items: center;
}

#myAlertContainer.show {
  visibility: visible;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;} 
  to {top: 30px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 30px; opacity: 1;} 
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

<div id="myAlertContainer"></div>
<button>makeAlert!</button>
<h1>hello</h1>
<p>lorem ipsum</p>

Answer 1

发生这种情况是因为你的超时是4s，但是淡出动画是3s。根据您的 CSS 动画持续时间调整超时将解决此问题。

class ToastHawaii {
  constructor(config = {}) {
    this.duration = typeof(config.duration) == 'undefined' ? 1000 : config.duration;
    this.toastContainer = config.toastContainer;
  }

    makeToast(d) {
        const html = `<div class="toast">
          <div>${d.title}</div>
          <div class="right">${d.content}</div>
        </div>`;
        this.toastContainer.innerHTML = html;
        this.toastContainer.classList.add("show");
        setTimeout(() => { 
          this.toastContainer.classList.remove("show");
        }, this.duration);
    }
}

const mA = new ToastHawaii({
  duration: 3000,
  toastContainer: document.querySelector('#myAlertContainer')
});

const content = `ICON`;

document.querySelector("button").addEventListener('click', () => {
  mA.makeToast({
    title: "hello", 
    content: content 
  });  
})

#myAlertContainer {
  position: fixed;
  left: 0%;
  top: 30px;  
  visibility: hidden;
  width:100%;
  z-index: 1;
  height:60px;
}
.toast {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  background: gray;
  color: #000;
  height:100%;
  padding: 0 16px;
  font-size: 0.8rem;
  font-weight: bold;
  margin: 0 auto;
  max-width: 350px;
}

.right {
  display: flex;
  gap: 5px;
  align-items: center;
}

#myAlertContainer.show {
  visibility: visible;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;} 
  to {top: 30px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 30px; opacity: 1;} 
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

<div id="myAlertContainer"></div>
<button>makeAlert!</button>
<h1>hello</h1>
<p>lorem ipsum</p>