我正在现有应用中创建聊天应用 . 我使用PHP和Mysql来处理后端和前端,我正在使用Jquery .

这是html代码,我在点击用户后显示消息,假设用户ID为50,用户ID为1 .

<div class="content">
      <!-- MESSAGE CONTENT -->
      <div id="msgbox" class="popup-messages"></div>

      <!-- BUTTON AND TETX INPUT -->
      <div style="width:100%;display:table;position:fixed;bottom:0px">
        <div style="width:90%;display:table-cell">
          <input type="text" id="sentmessagetext" class="inputform form-control"  placeholder="Type your message here">
        </div>
        <div style="width:10%;display:table-cell;">
          <a id="sendBtn'+ id +'"  onclick="sendMsg('<?= $id ?>','<?= $fromid ?>')" class="btn btn-primary btn-sm" >
            <i style="font-size:20px;margin-top:-2px;" class="fas fa-arrow-right text-white"></i>
          </a>
        </div>
      </div>
    </div>

用于获取用户的JS代码

<script>
            $(function(){
              register_popup('<?= $_GET["uid"] ?>', '<?= $_GET["fromid"] ?>');
            });
          function register_popup(id,fromuser)
          {

             $.post('includes/get_user_by_id.php',{ id:id }).done(function(data){

                var json = $.parseJSON(data);
                if(json.status == '1'){
                  $('#totalname').html(json.data[0].firstname+'  '+json.data[0].lastname);

                  fetch_msg(fromuser, id);

                   $('#sentmessagetext').keypress(function (e) {
                      if (e.which == 13) {
                        sendMsg(id, fromuser);
                        return false;
                      }
                    });
                  console.log(json.data);
                }
             });
          }
            function check_if_empty(id){

              var textfield = $("#sentmessagetext").val();

              if(textfield.length > 0){
                  $('#sendBtn').removeClass('disabled');
                  console.log(textfield.length);
              }else{
                    $('#sendBtn').addClass('disabled');
              }

            }


            function fetch_msg(from, to){
              $('#msgbox').html(' ');
              var new_messages = "";
              setInterval(function(){

              $.post('includes/fetch_msg.php',{toid:to,fromid:from}).done(function(data){
                var json = $.parseJSON(data);
                if(json.status == '1'){
                  for(var i = json.data.length-1; i >= 0;i--){
                    if(json.data[i].from_user == from){
                      new_messages = new_messages+ '<div class="chatmsgto">'+json.data[i].msg+'<br><i><span style="font-size:9px;float:right">'+json.data[i].sent_on+'</span></i></div>';
                    } else {
                      new_messages = new_messages+ '<div class="chatmsgfrom">'+json.data[i].msg+'<br><i><span style="font-size:9px;float:right">'+json.data[i].sent_on+'</span></i></div>';
                    }
                  }
                }
              });
            },1000);

//AFTER THIS NOt WORKING
              setInterval(function(){
            var old_messages = $('#msgbox').html(); // check for old msg

            if(new_messages != old_messages){ //check
              $('#msgbox').html(new_messages);//show
              $('#msgbox').animate({ scrollTop: $('#msgbox').prop("scrollHeight")}, 0);
            }
            },2000);
            }
            //
            function sendMsg(touser,fromuser){
              // alert(touser);
              var msgtext = $('#sentmessagetext').val();
                  if(msgtext.length > 0){
                  $.post('includes/send_chat_messages.php',{ to:touser, msg:msgtext }).done(function(data){
                    if(data == '1'){
                      $('#sentmessagetext').val(' ');
                      // $("#msgbox"+touser).load(location.href + " #msgbox"+touser);
                      fetch_msg(fromuser, touser);
                    }
                  });
                }else{
                  alert('Enter text to send');
                }

              }
    </script>

我逐个收到消息,但每次都会刷新并添加新消息,滚动到底部不起作用 . 我想只在输入新消息时刷新结果 .