javascript - jQuery 在 5 秒后隐藏/删除 DIV 内容

Question

如何自动隐藏或删除 DIV 的内容。我有一个容器，我可以在其中放置一些消息。

<div id="msg-container"></div>

我想只显示几秒钟的新消息，它可以是 5 秒、10 秒等等，但随后我希望它为空，添加新消息，显示它而不是隐藏它。我当然知道 setTimeout 的“技巧”:

setTimeout(function(){
  $('#divID').remove();
}, 5000);

但在这个选项中，我必须将这个脚本与每条消息一起传递，这不是我想要的。我也尝试过 setInterval，但顾名思义，它是间隔时间，因此消息可以显示 5 秒，如果到达间隔时间结束甚至可以不可见。
有没有什么方法可以编写简单的脚本，在我的 DIV 充满内容后 5 秒后准确地清理它？

Answer 1

假设您有一个消息容器。

<div id="message-container">
</div>

只需创建类似消息管理器的东西来处理此类功能。

var MessageManager = {
    show: function(content) {
        $('#message-container').html(content);
        setTimeout(function(){
            $('#message-container').html('');
        }, 5000);
    }
};

MessageManager.show('<h1>Testing</h1>');

每次你想显示一些东西，只需调用 MessageManager.show() 和你想显示的内容。