diff --git a/.agents/skills/impeccable/scripts/live-browser.js b/.agents/skills/impeccable/scripts/live-browser.js index bd4d56e36..3ac73b572 100644 --- a/.agents/skills/impeccable/scripts/live-browser.js +++ b/.agents/skills/impeccable/scripts/live-browser.js @@ -7928,7 +7928,7 @@ void main() { const barTopFromBottom = barRect && barRect.height > 0 ? Math.max(16, window.innerHeight - barRect.top + 12) : 16; - toastEl = el('div', { + const currentToast = el('div', { position: 'fixed', bottom: barTopFromBottom + 'px', left: '50%', transform: 'translateX(-50%) translateY(8px)', background: C.ink, color: C.white, @@ -7938,19 +7938,24 @@ void main() { transition: 'opacity 0.25s ' + EASE + ', transform 0.25s ' + EASE, pointerEvents: 'none', maxWidth: '420px', textAlign: 'center', }); - toastEl.id = PREFIX + '-toast'; - toastEl.textContent = message; - uiAppend(toastEl); + toastEl = currentToast; + currentToast.id = PREFIX + '-toast'; + currentToast.textContent = message; + uiAppend(currentToast); requestAnimationFrame(() => { - toastEl.style.opacity = '1'; - toastEl.style.transform = 'translateX(-50%) translateY(0)'; + if (toastEl !== currentToast) return; + currentToast.style.opacity = '1'; + currentToast.style.transform = 'translateX(-50%) translateY(0)'; }); setTimeout(() => { - if (toastEl) { - toastEl.style.opacity = '0'; - toastEl.style.transform = 'translateX(-50%) translateY(8px)'; - setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 250); - } + if (toastEl !== currentToast) return; + currentToast.style.opacity = '0'; + currentToast.style.transform = 'translateX(-50%) translateY(8px)'; + setTimeout(() => { + if (toastEl !== currentToast) return; + currentToast.remove(); + toastEl = null; + }, 250); }, duration); } diff --git a/.claude/skills/impeccable/scripts/live-browser.js b/.claude/skills/impeccable/scripts/live-browser.js index bd4d56e36..3ac73b572 100644 --- a/.claude/skills/impeccable/scripts/live-browser.js +++ b/.claude/skills/impeccable/scripts/live-browser.js @@ -7928,7 +7928,7 @@ void main() { const barTopFromBottom = barRect && barRect.height > 0 ? Math.max(16, window.innerHeight - barRect.top + 12) : 16; - toastEl = el('div', { + const currentToast = el('div', { position: 'fixed', bottom: barTopFromBottom + 'px', left: '50%', transform: 'translateX(-50%) translateY(8px)', background: C.ink, color: C.white, @@ -7938,19 +7938,24 @@ void main() { transition: 'opacity 0.25s ' + EASE + ', transform 0.25s ' + EASE, pointerEvents: 'none', maxWidth: '420px', textAlign: 'center', }); - toastEl.id = PREFIX + '-toast'; - toastEl.textContent = message; - uiAppend(toastEl); + toastEl = currentToast; + currentToast.id = PREFIX + '-toast'; + currentToast.textContent = message; + uiAppend(currentToast); requestAnimationFrame(() => { - toastEl.style.opacity = '1'; - toastEl.style.transform = 'translateX(-50%) translateY(0)'; + if (toastEl !== currentToast) return; + currentToast.style.opacity = '1'; + currentToast.style.transform = 'translateX(-50%) translateY(0)'; }); setTimeout(() => { - if (toastEl) { - toastEl.style.opacity = '0'; - toastEl.style.transform = 'translateX(-50%) translateY(8px)'; - setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 250); - } + if (toastEl !== currentToast) return; + currentToast.style.opacity = '0'; + currentToast.style.transform = 'translateX(-50%) translateY(8px)'; + setTimeout(() => { + if (toastEl !== currentToast) return; + currentToast.remove(); + toastEl = null; + }, 250); }, duration); } diff --git a/.cursor/skills/impeccable/scripts/live-browser.js b/.cursor/skills/impeccable/scripts/live-browser.js index bd4d56e36..3ac73b572 100644 --- a/.cursor/skills/impeccable/scripts/live-browser.js +++ b/.cursor/skills/impeccable/scripts/live-browser.js @@ -7928,7 +7928,7 @@ void main() { const barTopFromBottom = barRect && barRect.height > 0 ? Math.max(16, window.innerHeight - barRect.top + 12) : 16; - toastEl = el('div', { + const currentToast = el('div', { position: 'fixed', bottom: barTopFromBottom + 'px', left: '50%', transform: 'translateX(-50%) translateY(8px)', background: C.ink, color: C.white, @@ -7938,19 +7938,24 @@ void main() { transition: 'opacity 0.25s ' + EASE + ', transform 0.25s ' + EASE, pointerEvents: 'none', maxWidth: '420px', textAlign: 'center', }); - toastEl.id = PREFIX + '-toast'; - toastEl.textContent = message; - uiAppend(toastEl); + toastEl = currentToast; + currentToast.id = PREFIX + '-toast'; + currentToast.textContent = message; + uiAppend(currentToast); requestAnimationFrame(() => { - toastEl.style.opacity = '1'; - toastEl.style.transform = 'translateX(-50%) translateY(0)'; + if (toastEl !== currentToast) return; + currentToast.style.opacity = '1'; + currentToast.style.transform = 'translateX(-50%) translateY(0)'; }); setTimeout(() => { - if (toastEl) { - toastEl.style.opacity = '0'; - toastEl.style.transform = 'translateX(-50%) translateY(8px)'; - setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 250); - } + if (toastEl !== currentToast) return; + currentToast.style.opacity = '0'; + currentToast.style.transform = 'translateX(-50%) translateY(8px)'; + setTimeout(() => { + if (toastEl !== currentToast) return; + currentToast.remove(); + toastEl = null; + }, 250); }, duration); } diff --git a/.gemini/skills/impeccable/scripts/live-browser.js b/.gemini/skills/impeccable/scripts/live-browser.js index bd4d56e36..3ac73b572 100644 --- a/.gemini/skills/impeccable/scripts/live-browser.js +++ b/.gemini/skills/impeccable/scripts/live-browser.js @@ -7928,7 +7928,7 @@ void main() { const barTopFromBottom = barRect && barRect.height > 0 ? Math.max(16, window.innerHeight - barRect.top + 12) : 16; - toastEl = el('div', { + const currentToast = el('div', { position: 'fixed', bottom: barTopFromBottom + 'px', left: '50%', transform: 'translateX(-50%) translateY(8px)', background: C.ink, color: C.white, @@ -7938,19 +7938,24 @@ void main() { transition: 'opacity 0.25s ' + EASE + ', transform 0.25s ' + EASE, pointerEvents: 'none', maxWidth: '420px', textAlign: 'center', }); - toastEl.id = PREFIX + '-toast'; - toastEl.textContent = message; - uiAppend(toastEl); + toastEl = currentToast; + currentToast.id = PREFIX + '-toast'; + currentToast.textContent = message; + uiAppend(currentToast); requestAnimationFrame(() => { - toastEl.style.opacity = '1'; - toastEl.style.transform = 'translateX(-50%) translateY(0)'; + if (toastEl !== currentToast) return; + currentToast.style.opacity = '1'; + currentToast.style.transform = 'translateX(-50%) translateY(0)'; }); setTimeout(() => { - if (toastEl) { - toastEl.style.opacity = '0'; - toastEl.style.transform = 'translateX(-50%) translateY(8px)'; - setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 250); - } + if (toastEl !== currentToast) return; + currentToast.style.opacity = '0'; + currentToast.style.transform = 'translateX(-50%) translateY(8px)'; + setTimeout(() => { + if (toastEl !== currentToast) return; + currentToast.remove(); + toastEl = null; + }, 250); }, duration); } diff --git a/.github/skills/impeccable/scripts/live-browser.js b/.github/skills/impeccable/scripts/live-browser.js index bd4d56e36..3ac73b572 100644 --- a/.github/skills/impeccable/scripts/live-browser.js +++ b/.github/skills/impeccable/scripts/live-browser.js @@ -7928,7 +7928,7 @@ void main() { const barTopFromBottom = barRect && barRect.height > 0 ? Math.max(16, window.innerHeight - barRect.top + 12) : 16; - toastEl = el('div', { + const currentToast = el('div', { position: 'fixed', bottom: barTopFromBottom + 'px', left: '50%', transform: 'translateX(-50%) translateY(8px)', background: C.ink, color: C.white, @@ -7938,19 +7938,24 @@ void main() { transition: 'opacity 0.25s ' + EASE + ', transform 0.25s ' + EASE, pointerEvents: 'none', maxWidth: '420px', textAlign: 'center', }); - toastEl.id = PREFIX + '-toast'; - toastEl.textContent = message; - uiAppend(toastEl); + toastEl = currentToast; + currentToast.id = PREFIX + '-toast'; + currentToast.textContent = message; + uiAppend(currentToast); requestAnimationFrame(() => { - toastEl.style.opacity = '1'; - toastEl.style.transform = 'translateX(-50%) translateY(0)'; + if (toastEl !== currentToast) return; + currentToast.style.opacity = '1'; + currentToast.style.transform = 'translateX(-50%) translateY(0)'; }); setTimeout(() => { - if (toastEl) { - toastEl.style.opacity = '0'; - toastEl.style.transform = 'translateX(-50%) translateY(8px)'; - setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 250); - } + if (toastEl !== currentToast) return; + currentToast.style.opacity = '0'; + currentToast.style.transform = 'translateX(-50%) translateY(8px)'; + setTimeout(() => { + if (toastEl !== currentToast) return; + currentToast.remove(); + toastEl = null; + }, 250); }, duration); } diff --git a/.kiro/skills/impeccable/scripts/live-browser.js b/.kiro/skills/impeccable/scripts/live-browser.js index bd4d56e36..3ac73b572 100644 --- a/.kiro/skills/impeccable/scripts/live-browser.js +++ b/.kiro/skills/impeccable/scripts/live-browser.js @@ -7928,7 +7928,7 @@ void main() { const barTopFromBottom = barRect && barRect.height > 0 ? Math.max(16, window.innerHeight - barRect.top + 12) : 16; - toastEl = el('div', { + const currentToast = el('div', { position: 'fixed', bottom: barTopFromBottom + 'px', left: '50%', transform: 'translateX(-50%) translateY(8px)', background: C.ink, color: C.white, @@ -7938,19 +7938,24 @@ void main() { transition: 'opacity 0.25s ' + EASE + ', transform 0.25s ' + EASE, pointerEvents: 'none', maxWidth: '420px', textAlign: 'center', }); - toastEl.id = PREFIX + '-toast'; - toastEl.textContent = message; - uiAppend(toastEl); + toastEl = currentToast; + currentToast.id = PREFIX + '-toast'; + currentToast.textContent = message; + uiAppend(currentToast); requestAnimationFrame(() => { - toastEl.style.opacity = '1'; - toastEl.style.transform = 'translateX(-50%) translateY(0)'; + if (toastEl !== currentToast) return; + currentToast.style.opacity = '1'; + currentToast.style.transform = 'translateX(-50%) translateY(0)'; }); setTimeout(() => { - if (toastEl) { - toastEl.style.opacity = '0'; - toastEl.style.transform = 'translateX(-50%) translateY(8px)'; - setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 250); - } + if (toastEl !== currentToast) return; + currentToast.style.opacity = '0'; + currentToast.style.transform = 'translateX(-50%) translateY(8px)'; + setTimeout(() => { + if (toastEl !== currentToast) return; + currentToast.remove(); + toastEl = null; + }, 250); }, duration); } diff --git a/.opencode/skills/impeccable/scripts/live-browser.js b/.opencode/skills/impeccable/scripts/live-browser.js index bd4d56e36..3ac73b572 100644 --- a/.opencode/skills/impeccable/scripts/live-browser.js +++ b/.opencode/skills/impeccable/scripts/live-browser.js @@ -7928,7 +7928,7 @@ void main() { const barTopFromBottom = barRect && barRect.height > 0 ? Math.max(16, window.innerHeight - barRect.top + 12) : 16; - toastEl = el('div', { + const currentToast = el('div', { position: 'fixed', bottom: barTopFromBottom + 'px', left: '50%', transform: 'translateX(-50%) translateY(8px)', background: C.ink, color: C.white, @@ -7938,19 +7938,24 @@ void main() { transition: 'opacity 0.25s ' + EASE + ', transform 0.25s ' + EASE, pointerEvents: 'none', maxWidth: '420px', textAlign: 'center', }); - toastEl.id = PREFIX + '-toast'; - toastEl.textContent = message; - uiAppend(toastEl); + toastEl = currentToast; + currentToast.id = PREFIX + '-toast'; + currentToast.textContent = message; + uiAppend(currentToast); requestAnimationFrame(() => { - toastEl.style.opacity = '1'; - toastEl.style.transform = 'translateX(-50%) translateY(0)'; + if (toastEl !== currentToast) return; + currentToast.style.opacity = '1'; + currentToast.style.transform = 'translateX(-50%) translateY(0)'; }); setTimeout(() => { - if (toastEl) { - toastEl.style.opacity = '0'; - toastEl.style.transform = 'translateX(-50%) translateY(8px)'; - setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 250); - } + if (toastEl !== currentToast) return; + currentToast.style.opacity = '0'; + currentToast.style.transform = 'translateX(-50%) translateY(8px)'; + setTimeout(() => { + if (toastEl !== currentToast) return; + currentToast.remove(); + toastEl = null; + }, 250); }, duration); } diff --git a/.pi/skills/impeccable/scripts/live-browser.js b/.pi/skills/impeccable/scripts/live-browser.js index bd4d56e36..3ac73b572 100644 --- a/.pi/skills/impeccable/scripts/live-browser.js +++ b/.pi/skills/impeccable/scripts/live-browser.js @@ -7928,7 +7928,7 @@ void main() { const barTopFromBottom = barRect && barRect.height > 0 ? Math.max(16, window.innerHeight - barRect.top + 12) : 16; - toastEl = el('div', { + const currentToast = el('div', { position: 'fixed', bottom: barTopFromBottom + 'px', left: '50%', transform: 'translateX(-50%) translateY(8px)', background: C.ink, color: C.white, @@ -7938,19 +7938,24 @@ void main() { transition: 'opacity 0.25s ' + EASE + ', transform 0.25s ' + EASE, pointerEvents: 'none', maxWidth: '420px', textAlign: 'center', }); - toastEl.id = PREFIX + '-toast'; - toastEl.textContent = message; - uiAppend(toastEl); + toastEl = currentToast; + currentToast.id = PREFIX + '-toast'; + currentToast.textContent = message; + uiAppend(currentToast); requestAnimationFrame(() => { - toastEl.style.opacity = '1'; - toastEl.style.transform = 'translateX(-50%) translateY(0)'; + if (toastEl !== currentToast) return; + currentToast.style.opacity = '1'; + currentToast.style.transform = 'translateX(-50%) translateY(0)'; }); setTimeout(() => { - if (toastEl) { - toastEl.style.opacity = '0'; - toastEl.style.transform = 'translateX(-50%) translateY(8px)'; - setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 250); - } + if (toastEl !== currentToast) return; + currentToast.style.opacity = '0'; + currentToast.style.transform = 'translateX(-50%) translateY(8px)'; + setTimeout(() => { + if (toastEl !== currentToast) return; + currentToast.remove(); + toastEl = null; + }, 250); }, duration); } diff --git a/.qoder/skills/impeccable/scripts/live-browser.js b/.qoder/skills/impeccable/scripts/live-browser.js index bd4d56e36..3ac73b572 100644 --- a/.qoder/skills/impeccable/scripts/live-browser.js +++ b/.qoder/skills/impeccable/scripts/live-browser.js @@ -7928,7 +7928,7 @@ void main() { const barTopFromBottom = barRect && barRect.height > 0 ? Math.max(16, window.innerHeight - barRect.top + 12) : 16; - toastEl = el('div', { + const currentToast = el('div', { position: 'fixed', bottom: barTopFromBottom + 'px', left: '50%', transform: 'translateX(-50%) translateY(8px)', background: C.ink, color: C.white, @@ -7938,19 +7938,24 @@ void main() { transition: 'opacity 0.25s ' + EASE + ', transform 0.25s ' + EASE, pointerEvents: 'none', maxWidth: '420px', textAlign: 'center', }); - toastEl.id = PREFIX + '-toast'; - toastEl.textContent = message; - uiAppend(toastEl); + toastEl = currentToast; + currentToast.id = PREFIX + '-toast'; + currentToast.textContent = message; + uiAppend(currentToast); requestAnimationFrame(() => { - toastEl.style.opacity = '1'; - toastEl.style.transform = 'translateX(-50%) translateY(0)'; + if (toastEl !== currentToast) return; + currentToast.style.opacity = '1'; + currentToast.style.transform = 'translateX(-50%) translateY(0)'; }); setTimeout(() => { - if (toastEl) { - toastEl.style.opacity = '0'; - toastEl.style.transform = 'translateX(-50%) translateY(8px)'; - setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 250); - } + if (toastEl !== currentToast) return; + currentToast.style.opacity = '0'; + currentToast.style.transform = 'translateX(-50%) translateY(8px)'; + setTimeout(() => { + if (toastEl !== currentToast) return; + currentToast.remove(); + toastEl = null; + }, 250); }, duration); } diff --git a/.rovodev/skills/impeccable/scripts/live-browser.js b/.rovodev/skills/impeccable/scripts/live-browser.js index bd4d56e36..3ac73b572 100644 --- a/.rovodev/skills/impeccable/scripts/live-browser.js +++ b/.rovodev/skills/impeccable/scripts/live-browser.js @@ -7928,7 +7928,7 @@ void main() { const barTopFromBottom = barRect && barRect.height > 0 ? Math.max(16, window.innerHeight - barRect.top + 12) : 16; - toastEl = el('div', { + const currentToast = el('div', { position: 'fixed', bottom: barTopFromBottom + 'px', left: '50%', transform: 'translateX(-50%) translateY(8px)', background: C.ink, color: C.white, @@ -7938,19 +7938,24 @@ void main() { transition: 'opacity 0.25s ' + EASE + ', transform 0.25s ' + EASE, pointerEvents: 'none', maxWidth: '420px', textAlign: 'center', }); - toastEl.id = PREFIX + '-toast'; - toastEl.textContent = message; - uiAppend(toastEl); + toastEl = currentToast; + currentToast.id = PREFIX + '-toast'; + currentToast.textContent = message; + uiAppend(currentToast); requestAnimationFrame(() => { - toastEl.style.opacity = '1'; - toastEl.style.transform = 'translateX(-50%) translateY(0)'; + if (toastEl !== currentToast) return; + currentToast.style.opacity = '1'; + currentToast.style.transform = 'translateX(-50%) translateY(0)'; }); setTimeout(() => { - if (toastEl) { - toastEl.style.opacity = '0'; - toastEl.style.transform = 'translateX(-50%) translateY(8px)'; - setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 250); - } + if (toastEl !== currentToast) return; + currentToast.style.opacity = '0'; + currentToast.style.transform = 'translateX(-50%) translateY(8px)'; + setTimeout(() => { + if (toastEl !== currentToast) return; + currentToast.remove(); + toastEl = null; + }, 250); }, duration); } diff --git a/.trae-cn/skills/impeccable/scripts/live-browser.js b/.trae-cn/skills/impeccable/scripts/live-browser.js index bd4d56e36..3ac73b572 100644 --- a/.trae-cn/skills/impeccable/scripts/live-browser.js +++ b/.trae-cn/skills/impeccable/scripts/live-browser.js @@ -7928,7 +7928,7 @@ void main() { const barTopFromBottom = barRect && barRect.height > 0 ? Math.max(16, window.innerHeight - barRect.top + 12) : 16; - toastEl = el('div', { + const currentToast = el('div', { position: 'fixed', bottom: barTopFromBottom + 'px', left: '50%', transform: 'translateX(-50%) translateY(8px)', background: C.ink, color: C.white, @@ -7938,19 +7938,24 @@ void main() { transition: 'opacity 0.25s ' + EASE + ', transform 0.25s ' + EASE, pointerEvents: 'none', maxWidth: '420px', textAlign: 'center', }); - toastEl.id = PREFIX + '-toast'; - toastEl.textContent = message; - uiAppend(toastEl); + toastEl = currentToast; + currentToast.id = PREFIX + '-toast'; + currentToast.textContent = message; + uiAppend(currentToast); requestAnimationFrame(() => { - toastEl.style.opacity = '1'; - toastEl.style.transform = 'translateX(-50%) translateY(0)'; + if (toastEl !== currentToast) return; + currentToast.style.opacity = '1'; + currentToast.style.transform = 'translateX(-50%) translateY(0)'; }); setTimeout(() => { - if (toastEl) { - toastEl.style.opacity = '0'; - toastEl.style.transform = 'translateX(-50%) translateY(8px)'; - setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 250); - } + if (toastEl !== currentToast) return; + currentToast.style.opacity = '0'; + currentToast.style.transform = 'translateX(-50%) translateY(8px)'; + setTimeout(() => { + if (toastEl !== currentToast) return; + currentToast.remove(); + toastEl = null; + }, 250); }, duration); } diff --git a/.trae/skills/impeccable/scripts/live-browser.js b/.trae/skills/impeccable/scripts/live-browser.js index bd4d56e36..3ac73b572 100644 --- a/.trae/skills/impeccable/scripts/live-browser.js +++ b/.trae/skills/impeccable/scripts/live-browser.js @@ -7928,7 +7928,7 @@ void main() { const barTopFromBottom = barRect && barRect.height > 0 ? Math.max(16, window.innerHeight - barRect.top + 12) : 16; - toastEl = el('div', { + const currentToast = el('div', { position: 'fixed', bottom: barTopFromBottom + 'px', left: '50%', transform: 'translateX(-50%) translateY(8px)', background: C.ink, color: C.white, @@ -7938,19 +7938,24 @@ void main() { transition: 'opacity 0.25s ' + EASE + ', transform 0.25s ' + EASE, pointerEvents: 'none', maxWidth: '420px', textAlign: 'center', }); - toastEl.id = PREFIX + '-toast'; - toastEl.textContent = message; - uiAppend(toastEl); + toastEl = currentToast; + currentToast.id = PREFIX + '-toast'; + currentToast.textContent = message; + uiAppend(currentToast); requestAnimationFrame(() => { - toastEl.style.opacity = '1'; - toastEl.style.transform = 'translateX(-50%) translateY(0)'; + if (toastEl !== currentToast) return; + currentToast.style.opacity = '1'; + currentToast.style.transform = 'translateX(-50%) translateY(0)'; }); setTimeout(() => { - if (toastEl) { - toastEl.style.opacity = '0'; - toastEl.style.transform = 'translateX(-50%) translateY(8px)'; - setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 250); - } + if (toastEl !== currentToast) return; + currentToast.style.opacity = '0'; + currentToast.style.transform = 'translateX(-50%) translateY(8px)'; + setTimeout(() => { + if (toastEl !== currentToast) return; + currentToast.remove(); + toastEl = null; + }, 250); }, duration); } diff --git a/plugin/skills/impeccable/scripts/live-browser.js b/plugin/skills/impeccable/scripts/live-browser.js index bd4d56e36..3ac73b572 100644 --- a/plugin/skills/impeccable/scripts/live-browser.js +++ b/plugin/skills/impeccable/scripts/live-browser.js @@ -7928,7 +7928,7 @@ void main() { const barTopFromBottom = barRect && barRect.height > 0 ? Math.max(16, window.innerHeight - barRect.top + 12) : 16; - toastEl = el('div', { + const currentToast = el('div', { position: 'fixed', bottom: barTopFromBottom + 'px', left: '50%', transform: 'translateX(-50%) translateY(8px)', background: C.ink, color: C.white, @@ -7938,19 +7938,24 @@ void main() { transition: 'opacity 0.25s ' + EASE + ', transform 0.25s ' + EASE, pointerEvents: 'none', maxWidth: '420px', textAlign: 'center', }); - toastEl.id = PREFIX + '-toast'; - toastEl.textContent = message; - uiAppend(toastEl); + toastEl = currentToast; + currentToast.id = PREFIX + '-toast'; + currentToast.textContent = message; + uiAppend(currentToast); requestAnimationFrame(() => { - toastEl.style.opacity = '1'; - toastEl.style.transform = 'translateX(-50%) translateY(0)'; + if (toastEl !== currentToast) return; + currentToast.style.opacity = '1'; + currentToast.style.transform = 'translateX(-50%) translateY(0)'; }); setTimeout(() => { - if (toastEl) { - toastEl.style.opacity = '0'; - toastEl.style.transform = 'translateX(-50%) translateY(8px)'; - setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 250); - } + if (toastEl !== currentToast) return; + currentToast.style.opacity = '0'; + currentToast.style.transform = 'translateX(-50%) translateY(8px)'; + setTimeout(() => { + if (toastEl !== currentToast) return; + currentToast.remove(); + toastEl = null; + }, 250); }, duration); }