javascript - 在 jQuery 中弹出预先挂起的 div 项目(在消息接收时)

Question

我有一个小功能，它使用网络套接字接收实时更新。当收到新响应时，该函数会在 html 中添加一个 div。我只希望更新显示在页面内的窗口中，即。最多只应显示约 10 个前置 div。理想情况下，我需要在最旧的 div 溢出其父 div 之前将其弹出。

我的问题:

1. 如何在 div 溢出父级之前将其弹出？考虑到我几乎每秒都会收到回复，最有效的方法是什么？

   #HTML
   
   <div class="content">
       <p>archienorman-thesis $ realtime_bitcoin</p>
       <div id="messages"></div>
       <!-- window content -->
   </div>
   
   
   
   #JS FUNCTION
   
   var total = 0;
   var btcs = new WebSocket('wss://ws.blockchain.info/inv');
   
   btcs.onopen = function () {
       btcs.send(JSON.stringify({"op": "unconfirmed_sub"}));
   };
   
   btcs.onmessage = function (onmsg) {
       console.log(response);
       var response = JSON.parse(onmsg.data);
       var amount = response.x.out[0].value;
       var calAmount = amount / 100000000;
       var msgs = $('#messages .message');
       var count = msgs.length;
   
       if (count == 10) {
           msgs.first().remove();
       }
       $('#messages').prepend("<p class='tx'> Amount: " + calAmount + "</p>");
   }
   

Answer 1

让容器div overflow: hidden，使用JS scrollHeight 和clientHeight 检查是否溢出

CSS

#messages {
  overflow: hidden;
}

JS

删除您的 if 语句并将其添加到您的 prepend() 行之后:

$('#messages').prepend("<p class='tx'> Amount: " + calAmount + "</p>");
$('#messages').css("overflow", "scroll");
if($('#messages')[0].scrollHeight > $('#messages').height())
    msgs.last().remove();
$('#messages').css("overflow", "hidden");

上面的代码快速地使 #messages 具有 overflow: scroll 属性，以便 scrollHeight 属性起作用。如果有额外的滚动，则删除该元素。

参见 Demo .

---

注意

请参阅我对您的问题的评论。您应该删除 last()，而不是 first()。以演示为例——尝试将 last() 更改为 first()，它不会起作用。