пропадает snackbar, наверное из-за setTimeout

@GERALD2799 · Регистрация: 27.09.2016

Author24 — интернет-сервис помощи студентам

если несколько раз нажать на кнопку, то вызовется только одна панель, которая будет висеть 3 секунды. но если панель пропадает и нажать на кнопку еще раз, то панель появляется и исчезает раньше 3 секунды.

думаю проблема в этой строке

Javascript

1	setTimeout(function(){ snackbar.classList.remove("show"); }, 3000);

наверное проходит время с прошлых кликов и поэтому панель убирается раньше положенного времени.Есть ли способы исправить, я новенький в js?

https://jsfiddle.net/m6jtLy5v/

HTML5

1
2
3

<div id="snackbar"></div>
<br><br><br><br><br><br><br>
<button type="button">show</button>

CSS

#snackbar 
{
    visibility: hidden;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    height: 60px;
    font-family: Arial;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: fixed;
    z-index: 1;
    top: 0px;
    font-size: 1.5em;
}
 
#snackbar.show 
{
    visibility: visible;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
 
 
@keyframes fadein 
{
    from {top: -30px; opacity: 0;} 
    to {top: 0px; opacity: 1;}
}
 
@keyframes fadeout 
{
    from {top: 0px; opacity: 1;} 
    to {top: -30px; opacity: 0;}
}

Javascript

var btn = document.querySelector("button")
btn.onclick = function()
{
    show_snackbar("Text", 'orange');
};
 
function show_snackbar(message, color = "#333") 
{
    var snackbar = document.getElementById("snackbar")
    
    snackbar.style.backgroundColor = color;
    snackbar.textContent = message;
   
    snackbar.className = "show";
 
    // !!!!
    setTimeout(function(){ snackbar.classList.remove("show"); }, 3000);
}

@Balanaar · 14.08.2017, 15:23

Зашёл на ваш фиддл. Проблему не увидел.

@GERALD2799 · 14.08.2017, 15:40 **[ТС]**

странно. может я неправильно объяснил. попробуйте нажать на кнопку несколько раз когда панель будет активна, а когда она исчезнет нажмите снова лишь раз. у вас она будет активной 3 секунды? у меня и одна секунда не проходит как панель исчезает

@Balanaar 2454 / 1761 / 624 Регистрация: 11.07.2016 Сообщений: 4,051
	14.08.2017, 15:23	2
	Зашёл на ваш фиддл. Проблему не увидел. 1

@GERALD2799 10 / 10 / 13 Регистрация: 27.09.2016 Сообщений: 248
	14.08.2017, 15:40 [ТС]	3
	странно. может я неправильно объяснил. попробуйте нажать на кнопку несколько раз когда панель будет активна, а когда она исчезнет нажмите снова лишь раз. у вас она будет активной 3 секунды? у меня и одна секунда не проходит как панель исчезает 0