Javascript 在顶部的最后一条消息溢出时删除它

这里有一个例子，来解释我想要达到的目标

---

吉米：嘿，我是从PHP发送的新消息，我是新的，我被附加到消息日志中：）

汤米：嘿，你！我们有更多的信息，你的手机很快就会被删除

乔尼：对了，吉米被从我们的包厢（div）里打倒，他被搬走之前，只剩下一条消息了

10秒后

汤米：嘿，你！我们有更多的信息，你的手机很快就会被删除

乔尼：是的，在吉米因为被击倒而被撤职之前，这只剩下一条消息了

比利：嗨，伙计们。。等等，吉米去哪了

乔尼：箱子太满了，所以我们中的一个不得不走，吉米在最上面，所以他走了。说到这里，汤米来了！汤米被带走了

---

使用setInterval，我成功地实现了类似的效果，但是，它只会删除底部溢出的一个，它是最新的一个，而不是顶部的一个，它的消息是“旧的”

下面是我为实现这一点而创建的代码

var message=document.getElementById('chat_wrap');

if(message.scrollHeight>message.offsetHeight) {
Element.remove();
}

所以，基本上，我想要和我做的相反。但我不确定我如何才能做到这一点

---

更新以使其更加清晰：

---

---

对不起，我的解释不太清楚。一个很好的例子是水獭，当水獭装满水时，从底部将水除去，而不是从顶部除去。另一种解释我试图实现的方法是，最新的基本上是优先级，因此，如果最新的需要div中的空间，那么请删除仍然存在的最旧的一个。

这里是一个工作示例

插入消息

脚本

$(function(){
    var removeOldest = function(){
        var messages = $("#messages");
        var maxHeight = messages.height();
        var height = 0;

        $(messages.children().get().reverse()).each(function(){
            height += $(this).height();
            if (height > maxHeight)
               $(this).remove();
        });
    };


    $("#insertAMessage").click(function(){
       $('<div class=".messageItem">bla bla bla bla</div>').appendTo("#messages");
       removeOldest();
   });
});​

$（函数（）{
var removeloster=函数（）{
var messages=$（“#messages”）；
var maxHeight=messages.height（）；
var高度=0；
$（messages.children（）.get（）.reverse（））.each（函数（）{
高度+=$（此）.height（）；
如果（高度>最大高度）
$（this.remove（）；
});
};
$（“#插入消息”）。单击（函数（）{
$（'blablablablabla'）。附加到（'messages'）；
删除最早的（）；
});
});​

---

我使用jquery是因为它很简单。如果不使用jquery，想法是一样的，但需要修改代码

至少。。。看一看，我使用jQuery完成了任务

HTML:

JavaScript:

// messages to be processed
var messages = [{
    id: 1,
    from: "David",
    text: "Test 1"
}, {
    id: 2,
    from: "David",
    text: "Test 2"
}, {
    id: 3,
    from: "David",
    text: "Test 3"
}, {
    id: 4,
    from: "David",
    text: "Test 4"
}, {
    id: 5,
    from: "David",
    text: "Test 5"
}, {
    id: 6,
    from: "David",
    text: "Test 6"
}];

// how many messages the container acepts?
var maxMessages = 3;

// how many messages the container has?
var messageCounter = 0;

// what is the index of the message that is being currently processed
var currentIndex = 0;

// the messages that was processed (It will work like a queue (FIFO)
var processedMessages = [];

$(function(){
    // processes one message for each 3 seconds
    setInterval( function(){

        // the current message
        var message = messages[currentIndex++];

        // is there a message to process?
        if ( message ) {

            // yes, there is!

            // first, removes the oldest if the max quantity was reached
            if ( messageCounter == maxMessages ) {

                // the container now will have minus one message
                messageCounter--;

                // what is the oldest one?
                // removes from the queue head
                var oldest = processedMessages.pop();

                // removes from the container
                $( "#message_" + oldest.id ).remove();

            }

            // new message incoming!
            messageCounter++;

            // inserts the new message at the queue tail
            processedMessages.unshift( message );

            // inserts the message in the container
            $( "#chat" ).append( "<div id='message_" + message.id + "'>From " +
                                 message.from + ": " + message.text + "</div>" );

        } else {

            // there is no message
            currentIndex--;

        }

    }, 3000 );

});

//要处理的消息
变量消息=[{
id:1，
来自：“大卫”，
文本：“测试1”
}, {
id:2，
来自：“大卫”，
文本：“测试2”
}, {
id:3，
来自：“大卫”，
文本：“测试3”
}, {
id:4，
来自：“大卫”，
文本：“测试4”
}, {
id:5，
来自：“大卫”，
文本：“测试5”
}, {
id:6，
来自：“大卫”，
文本：“测试6”
}];
//容器接收了多少条消息？
var-maxMessages=3；
//容器有多少条消息？
var messageCounter=0；
//当前正在处理的邮件的索引是什么
var currentIndex=0；
//已处理的消息（它将像队列（FIFO）一样工作）
var processedMessages=[]；
$（函数（）{
//每3秒钟处理一条消息
setInterval（函数（）{
//当前消息
var消息=消息[currentIndex++]；
//是否有要处理的消息？
如果（信息）{
//是的，有！
//首先，如果达到最大数量，则删除最旧的
if（messageCounter==maxMessages）{
//容器现在将有一条减号消息
消息计数器--；
//最古老的是什么？
//从队列头中删除
var oldest=processedMessages.pop（）；
//从容器中移除
$（“#消息"+olester.id）.remove（）；
}
//新消息传入！
messageCounter++；
//在队列尾部插入新消息
processedMessages.unshift（消息）；
//在容器中插入消息
$（“#聊天”）.append（“From”+
message.from+“：“+message.text+”）；
}否则{
//没有消息
当前索引--；
}
}, 3000 );
});

---

jsiddle:

给出插入某个容器（例如div）中的操作系统消息列表，是否要删除最新的（最后输入的）消息？是吗？对不起，我的解释不是很清楚。不，我想要的是相反的，所以它就像…一个水瓶，当它满的时候，从底部把水移走，而不是从顶部把水移走。另一种解释我试图达到的目的的方法是基本上最新的是优先权，所以如果最新的需要在div中留出空间，那么就把它移走最老的一个仍然站着。好的。我在一个例子中工作。等一下。再等一会儿…我关闭了jsFidle选项卡…我将再次写这个例子：SHi。很抱歉我迟到了…我知道你已经解决了你的问题，但我发布了我的解决方案。看一看。；）谢谢！它工作得非常好！我所需要的只是做这件事的方法（概念）。但是你也给了代码！谢谢你的时间！是的，非常好：）谢谢你的帮助

<div id="chat"></div>

// messages to be processed
var messages = [{
    id: 1,
    from: "David",
    text: "Test 1"
}, {
    id: 2,
    from: "David",
    text: "Test 2"
}, {
    id: 3,
    from: "David",
    text: "Test 3"
}, {
    id: 4,
    from: "David",
    text: "Test 4"
}, {
    id: 5,
    from: "David",
    text: "Test 5"
}, {
    id: 6,
    from: "David",
    text: "Test 6"
}];

// how many messages the container acepts?
var maxMessages = 3;

// how many messages the container has?
var messageCounter = 0;

// what is the index of the message that is being currently processed
var currentIndex = 0;

// the messages that was processed (It will work like a queue (FIFO)
var processedMessages = [];

$(function(){
    // processes one message for each 3 seconds
    setInterval( function(){

        // the current message
        var message = messages[currentIndex++];

        // is there a message to process?
        if ( message ) {

            // yes, there is!

            // first, removes the oldest if the max quantity was reached
            if ( messageCounter == maxMessages ) {

                // the container now will have minus one message
                messageCounter--;

                // what is the oldest one?
                // removes from the queue head
                var oldest = processedMessages.pop();

                // removes from the container
                $( "#message_" + oldest.id ).remove();

            }

            // new message incoming!
            messageCounter++;

            // inserts the new message at the queue tail
            processedMessages.unshift( message );

            // inserts the message in the container
            $( "#chat" ).append( "<div id='message_" + message.id + "'>From " +
                                 message.from + ": " + message.text + "</div>" );

        } else {

            // there is no message
            currentIndex--;

        }

    }, 3000 );

});