Javascript jQuery-替换用户消息-重复自身

我有一个很简单的问题。我有一个函数，我给一个用户消息，它在一个预定义的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);
    }

}

函数readUserMessage（message）{ 如果（$（'#userMessage'）。是（':visible'））{ $（'#userMessage'）.fadeOut（200）.html（“+message+”）.fadeIn（300）.delay（3000）.fadeOut（300）； }否则{ $（'#userMessage'）.html（“+message+”）.fadeIn（300）、delay（3000）、fadeOut（300）； } } 非常感谢您的帮助。

.html（）

不会自动添加到jQuerys

fx队列

，因此它不会“等待”您的动画内容完成。您可以通过手动添加队列条目来解决此问题，如

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

$（'#userMessage'）。淡出（200）。队列（函数（下一个）{
$（this.html（“+message+”）；
next（）；
}).fadeIn（300）。延迟（3000）。淡出（300）；

---

参考资料：

您可以试试这个

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);
    }
}

函数readUserMessage（message）{ 如果（$（'#userMessage'）。是（':visible'））{ $（'#userMessage'）.fadeOut（200，function（）{ $（this.html（“+message+”） .fadeIn（300）。延迟（3000）。淡出（300）； }); }否则{ $（'#userMessage'）.html（“+message+”） .fadeIn（300）。延迟（3000）。淡出（300）； } }

---

您可以查看demo@jsFiddle.net:

以了解此类问题，理论上最好的解决方案是使用队列

基本上，在您的场景中，每当您阅读一条用户消息时，您都会执行一个操作。如果要管理这些操作，可以将它们放入队列中，然后进行管理

jAndy发布的代码非常有趣，如果您想了解更多关于队列的信息，可以对它们进行很好的解释和说明

---

在这个主题上花费一些时间是非常有帮助的，因为队列在很多情况下都很有用。

您可以在调用其他效果（淡入淡出、滑动等）之前强制完成队列。

顺便说一句。我强烈建议检查不同类型的模板引擎，以便在JS代码中生成html。我一直在用胡子