Попробуйте сделать опрос с помощью getJSON () и jsonp, проблема в том, что представление мигает - PullRequest
Новая
       6

Попробуйте сделать опрос с помощью getJSON () и jsonp, проблема в том, что представление мигает

0 голосов
/ 09 ноября 2018

Я пытаюсь сделать опрос, в основном я обновляю свою петицию каждые 3 с к API, используя jsonp и getJSON, проблема в том, что мое представление также обновляется одновременно и мигает в интерфейсе клиента (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>"
                        );
                    }
                });


            });



        }

Я понятия не имею, как я могу это сделать и устранить эту проблему с представлением, может ли кто-нибудь мне помочь, все это ново для меня, спасибо

1 Ответ

0 голосов
/ 09 ноября 2018

Я бы предложил попробовать следующее.Мигание наиболее вероятно из-за того, что вы очистили окно чата и ничего не вставили туда, пока не вернется Ajax.Эта версия, кроме уменьшения количества раз, когда DOM изменяется, также не заменяет окно чата, пока не соберет все html, которые должны быть в нем. 

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);
  });
}
...