Очередь анимации jQuery

Question

У меня есть сообщение об ошибке, которое показывает, когда значение неверно.и используя setTimeout 3 секунды, сообщение исчезает.Проблема заключается в том, что сообщение отображается впервые и ожидает 3 секунды, и в этот момент пользователь нажимает кнопку «Отправить» снова, и событие запускается снова.первое сообщение исчезает и исчезает также второе сообщение.Вот код сообщения шоу:

function showMSG(txt,type){
  $('.msg .text').html(txt);
  $('.msg').fadeIn(300);
  $('.msg img').attr({'src':'images/'+(type?'msgDone.jpg':'msgError.jpg')});
  setTimeout(function(){$('.msg').fadeOut(300);},300);
}

Пожалуйста, помогите заранее, спасибо

Answer 1

Редактировать для уточненного вопроса : В этом случае вам нужно будет обработать собственный тайм-аут и остановить старую анимацию (вместо использования .delay(), который вы не можете контролировать), setTimeout() возвращает идентификатор таймера, который вы можете установить на 3 секунды (3000 мс, а не 300 мс!), И, когда сработает следующее сообщение, остановите таймер с помощью clearTimeout().

Кроме того, вы захотите объединить это с .stop(), чтобы очистить очередь исчезновения, например так:

var timer;
function showMSG(txt,type){
  clearTimeout(timer);
  $('.msg .text').html(txt);
  $('.msg img').attr({'src':'images/'+(type?'msgDone.jpg':'msgError.jpg')});
  var msg = $('.msg').stop().fadeIn(300);
  timer = setTimeout(function() { msg.fadeOut(300); }, 3000);
}

Answer 2

Вам необходимо присвоить тайм-аут переменной и убедиться, что тайм-аут еще не установлен перед установкой нового.

<code>var timeout = null;</p>

<p>function showMSG(txt,type) {
    if (timeout !== null) clearTimeout(timeout);
    $('.msg .text').html(txt);
    $('.msg').fadeIn(300);
    $('.msg img').attr({'src':'images/'+(type?'msgDone.jpg':'msgError.jpg')});
    timeout = setTimeout(function(){$('.msg').fadeOut(300);},300);
}