jQuery - замена пользовательского сообщения - повторяется

Question

У меня, надеюсь, простая проблема.У меня есть функция, которую я даю пользователю сообщение, оно отображает сообщение в предопределенном div.Однако, если другое сообщение приходит слишком быстро, оно меняет сообщение, но затем исчезает и снова возвращается.

Это то, где я сейчас нахожусь; -

function readUserMessage(message) {

    if($('#userMessage').is(':visible')) {
        $('#userMessage').fadeOut(200).html("<span style=\"\">" + message + "</span>").fadeIn(300).delay(3000).fadeOut(300);
    } else {
         $('#userMessage').html("<span style=\"\">" + message + "</span>").fadeIn(300).delay(3000).fadeOut(300);
    }

}

Любая помощь действительнооценили.

Answer 1

Вы можете попробовать это.fadeOut имеет функцию обратного вызова, которая вызывается после завершения fadeout.Вы можете использовать это.

function readUserMessage(message) {
    if ($('#userMessage').is(':visible')) {
      $('#userMessage').fadeOut(200, function() {
        $(this).html("<span style=\"\">" + message + "</span>")
               .fadeIn(300).delay(3000).fadeOut(300);
      });
    } else {
       $('#userMessage').html("<span style=\"\">" + message + "</span>")
               .fadeIn(300).delay(3000).fadeOut(300);
    }
}

Вы можете проверить демо @ jsFiddle.net: http://jsfiddle.net/KZYbs/

Answer 2

.html() не добавляется автоматически в jQuerys fx queue, поэтому он не будет "ждать", пока ваши анимационные материалы не закончатся.Это можно обойти, добавив запись очереди вручную, например

$('#userMessage').fadeOut(200).queue(function(next) {
     $(this).html("<span style=\"\">" + message + "</span>");
     next();
}).fadeIn(300).delay(3000).fadeOut(300);

Ссылка: .queue ()

Answer 3

Вы можете принудительно завершить очередь перед вызовом другого эффекта (затухание, скольжение и т. Д.) С помощью функции stop .

Answer 4

Для такой проблемы теоретически лучшим решением является использование очереди.

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

Код, который разместил jAndy, очень интересен, и если вы хотите узнать больше об очередях, они прекрасно объяснят здесь, на stackoverflow и здесь, на сайте jquery .

Проведение некоторого времени на эту тему может быть очень полезным, поскольку очереди могут оказаться полезными во множестве ситуаций.