Question

我尝试进行民意调查，基本上我使用jsonp和getJSON每3秒钟将请求刷新到API一次，问题是我的视图也同时刷新并在客户端（HTML）界面中闪烁，我有一些喜欢这个

var chatbox = $("#chatbox");

       singleChatView();
        setInterval(function () {
            chatbox.empty();
            singleChatView();
        }, 1000);


        function singleChatView() {


            var chatid = localStorage.getItem('chatid');
            $.getJSON("http://myapi/?chatid=" + chatid + "&jsonp=?", function (chats) {

                console.log(chats);

                $.each(chats.DATA, function (key, c) {
                    $('.msgRecipientName').text(c.SENTBY.name);
                    if (c.SENTBY.id == userInfo.PROFILE.USERID) {
                        chatbox.append(
                            "<li class='msgThread group currentUser'>" +
                            "<div class='msgBalloon group'>" +
                            "<div class='msgHeader'>" +
                            "<div class='msgFull'>" + c.MESSAGE + "</div>" +
                            "</div>" +
                            "</div>" +
                            "<div class='msgDate'>" +
                            formatDate(c.CREATEDON) +
                            "</div>" +
                            "</li>"
                        );
                    } else {
                        chatbox.append(
                            "<li class='msgThread group'>" +
                            "<div class='msgAuthor' style='background: #fff url(myapi/100_couple.png) 50% background-size: cover;'>" +
                            "<a ng-href=''>" +
                            "<span></span>" +
                            "</a>" +
                            "</div>" +
                            "<div class='msgBalloon group'>" +
                            "<div class='msgHeader'>" +
                            "<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
                            "<div class='msgFull'>" + c.MESSAGE + "</div>" +
                            "</div>" +
                            "</div>" +
                            "<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
                            "<div class='msgDate'>" + formatDate(c.CREATEDON) + "</div>" +
                            "</li>"
                        );
                    }
                });


            });



        }

我不知道如何做到这一点并使视图中的问题无效，有人可以帮助我，这一切对我来说都是新的

Answer 1

我建议尝试以下方法。眨眼很可能是由于您清除了聊天框，并且在ajax返回之前未在其中放置任何内容。这个版本除了减少DOM更改的次数外，在构建完所有应包含在其中的html之前，也不会替换chatbox。

var chatbox = $("#chatbox");

//start the chat loop
singleChatView();

function singleChatView() {
  var chatid = localStorage.getItem('chatid');
  
  $.getJSON("http://myapi/?chatid=" + chatid + "&jsonp=?", function(chats) {
    console.log(chats);
    
    //collect the messages
    //if we update the page once, the browser has to do less work rendering
    //all the changes
    var messages = [];
    //keep track of the "c.SENTBY.name"
    //since you are doing a global selector and setter, the value will
    //end up being the last value you update all them to be anyway
    //no need to update multiple times
    var sendby = '';

    $.each(chats.DATA, function(key, c) {
      sentby = c.SENTBY.name;
      
      if (c.SENTBY.id == userInfo.PROFILE.USERID) {
        messages.push(
          "<li class='msgThread group currentUser'>" +
            "<div class='msgBalloon group'>" +
              "<div class='msgHeader'>" +
                "<div class='msgFull'>" + c.MESSAGE + "</div>" +
              "</div>" +
            "</div>" +
            "<div class='msgDate'>" + formatDate(c.CREATEDON) + "</div>" +
          "</li>"
        );
      } else {
        messages.push(
          "<li class='msgThread group'>" +
            "<div class='msgAuthor' style='background: #fff url(myapi/100_couple.png) 50% background-size: cover;'>" +
              "<a ng-href=''>" +
                "<span></span>" +
              "</a>" +
            "</div>" +
            "<div class='msgBalloon group'>" +
              "<div class='msgHeader'>" +
                "<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
                "<div class='msgFull'>" + c.MESSAGE + "</div>" +
              "</div>" +
            "</div>" +
            "<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
            "<div class='msgDate'>" + formatDate(c.CREATEDON) + "</div>" +
          "</li>"
        );
      }
    });
    
    //update the recipent with the last sent by, once
    $('.msgRecipientName').text(sentby);
    //replace all the chatbox text with the collected html that would have
    //otherwise been append one at a time
    chatbox.html(messages);
    
    //now that we've finished this iteration, start the next iteration after
    //a second
    setTimeout(singleChatView, 1000);
  });
}

尝试使用getJSON（）和jsonp进行民意调查，问题是视图闪烁

1 个答案: