jQuery——替换用户消息——重复它自己

jQuery - Replacing a user message - repeats itself

本文关键字：它自己 用户消息 替换 jQuery      更新时间：2023-09-26

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

非常感谢您的帮助。

.html()不会自动添加到jQuerys fx queue中，因此它不会"等待"到动画内容完成。您可以通过手动添加队列条目（如）来解决此问题

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

参考：.queue（）

你可以试试这个。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/

您可以在使用stop函数调用其他效果（淡入淡出、幻灯片等）之前强制完成队列。

对于这样的问题，理论上最好的解决方案是使用队列。

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

jAndy发布的代码非常有趣，如果你想了解更多关于队列的信息，它们在stackoverflow和jquery网站上都有很好的解释。

花点时间在这个问题上会很有帮助，因为排队在很多情况下都很有用。

相关文章：