追加数组数据jQuery的正确方法

Question

我正在使用javascript数据库构建聊天应用。
这是实时的，并且可以在本地完美地工作。

将其部署到联机后，附加时间会延迟几毫秒
它像this image.

我认为这是因为我在附加新添加的数据之前先清除了“ ul ”。

---

以下是代码

$("#chatbox ul").html("");

$.each(messageArr, function(i,message){

            if(!message){
                return;
            }

            var myMsg = "<li class=me id="+message._id+"><p class=what>"+message.what+"</p><p>"+moment(message.when).fromNow()+"  by <strong>"+message.who+"</strong></p></li>";    

            var someoneMsg = "<li class=someone id="+message._id+"><p class=what>"+message.what+"</p><p>"+moment(message.when).fromNow()+"  by <strong>"+message.who+"</strong></p></li>";  

            if(isMe){
               $("#chatbox ul").append(myMsg);
            }else{
               $("#chatbox ul").append(someoneMsg);
            }

  })         

---

有没有适当的方法来循环和追加数组数据而不会像这样闪烁？

Answer 1

$("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
});

$("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
});