卸下前最後的消息時，它得到飛越

Question

下面是一個例子，來解釋我想實現

---

吉米：嘿，我從PHP發送一個新的消息，我是新和我追加到消息日誌:)！湯米：嘿，你！我們更多的消息即將到來，你的消息很快就會被移除！

Jonny：對，這是它只有一個更多的消息，直到吉米被刪除，因爲他被我們的盒子（div）擊倒。

10秒後......

湯米：嘿，你！我們更多的消息即將到來，你的消息很快就會被移除！

Jonny：對，這是隻有一個更多的消息，直到吉米被刪除，因爲他被淘汰。

比利：你好！等等吉米去哪裏了？

喬尼：箱子變得太滿了，所以我們中的一個人不得不離開，吉米在頂部，所以他走了。說到這一點，有湯米！ 湯米被刪除。

---

使用setInterval的，我設法然而達到類似的效果，它只會去掉底部有一個溢出的，這是最新的一個，而不是頂部一個誰的信息是「老」。

這裏是我創造了實現這一目標的代碼...

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

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

所以基本上，我想我所做的事情相反。但我不知道我該如何實現這一點。

---

更新，以使其更清晰：

---

對不起，我的解釋是不是說清楚。一個很好的例子是一個水壺，當它完全從底部移走水時，而不是將它從頂部移開。另一種解釋我試圖實現的方式基本上是NEWEST是優先級，所以如果最新的div需要空間，那麼刪除最老的仍然存在。

Answer 1

下面是一個工作示例。

http://jsfiddle.net/JNahf/2/

<div id="messages"> 
</div> 
<button id="insertAMessage">Insert a message</button> 

腳本

$(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(); 
    }); 
});​ 

我使用jQuery，因爲它很簡單。如果你不使用jQuery，這個想法是一樣的，但你需要修改代碼。

Answer 2

至少...看一下，我用jQuery來完成任務。

HTML：

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

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

}); 

的jsfiddle：http://jsfiddle.net/davidbuzatto/Ep4tk/