Javascript ändern setInterval auf scroll Höhe

Question

Nachfolgend werden meiner ursprünglichen Code finden:

function refreshChat() { 
    var id = "'.$convers_id.'"; 
    var receiver = "'.$system->getFirstName($second_user->full_name).'"; 
    $.get("'.$system->getDomain().'/ajax/refreshChat.php?id=" + id + "&receiver=" + receiver, function(data) { 
     $("#messages").html(data); 
     $(".conversation-message-list").getNiceScroll(0).scrollTop($(".conversation-content").height(), -1); 

    setTimeout(refreshChat, 3000); 
    }); 
} 

function sendMessage() { 
    var user2 = "'.$user2.'"; 
    var message = $("#message"); 
    if(message.val() != "" && message.val() != " ") { 
    $.get("'.$system->getDomain().'/ajax/sendMessage.php?id="+user2+"&msg="+encodeURIComponent(message.val()), function(data) { 
    $("#messages").html(data); 
    message.val(""); 
    }); 
    } 
} 
$(document).keypress(function(e) { 
     if(e.which == 13) { 
      sendMessage(); 
     } 
    }); 
     function appendToMessage(str) { 
var message = $("#message"); 
message.val(message.val()+" "+str); 
$("#emoticonList").modal("hide"); 
} 

Was ich versuche, das Intervall auf der Höhe des scroller (oder der Position) basiert, ist zu ändern, weil jedes Mal, es Läuft die RefreshChat-Funktion, drückt sie den Scroller zurück, was es unmöglich macht, im Chat zu blättern.

Ich habe bereits versucht, zu ändern:

window.setInterval(function(){ 
    refreshChat(); 
}, 1000); 

An:

if ($(window).scrollTop() > 200) { 
window.setInterval(function(){ 
    refreshChat(); 
}, 100000000000); 
} else { 
    window.setInterval(function(){ 
    refreshChat(); 
}, 1000); 
} 

Aber das bricht das Skript. Ich möchte allen im Voraus dafür danken, dass sie mir geholfen haben, mein Problem zu lösen.

HINWEIS: wie vorgeschlagen Ich habe meine ORIGINAL CODE AUF DER GRUNDLAGE MPLUNGJAN Vorschlag

EDITED Aber wie kann ich eine neue Nachricht im Inneren des chatscreen anhängen?

HTML:

<div class="conversation-message-list" onclick="hideEmoticons()"> 

          <?php if ($user->expire == NULL){ ?> 
          <!--geen abbo--> 
          <div class="i-info-msg text-center" style="padding-top:15%;"><div class="pass-frac-item"><p class="title">Je hebt een nieuw bericht ontvangen!<span class="arrow"></span></p></div> 
     <p>Zien wie jou een bericht heeft gestuurd en antwoorden? Neem nu een Membership!</p> 
     <p>Maak ook gebruik van andere Upgrades, zoals zonder reclame surfen, anoniem profielen bekijken of jezelf in de spotlight plaatsen!</p> 

     <a class="i-button-14 i-button-bg-1" href="<?=$system->getDomain()?>/memberships.php">Neem een membership!</a> 
    </div> 
          <!--/geen abbo--> 
          <? } else { ?> 
          <!--wel abbo--> 
           <div class="conversation-content" id="messages"> 
            <?php 
            if($messages->num_rows >= 1) { 
             while($message = $messages->fetch_object()) { 
              $sender = $system->getUserInfo($message->sender_id); 
              ?> 
              <div class="row"> 
               <div class="conversation-message pull-left"> 
                <div class="pull-left"> 
                 <img src="<?=$system->getProfilePicture($sender)?>" class="img-circle pull-left" style="height:50px;width:50px;"> 
                </div> 
                <div class="well bg-grey pull-left emoticon-small"> 
                 <?php 
                 if($message->is_sticker == 0) { 
                  $message->message = $system->secureField($system->smart_wordwrap($message->message)); 
                  echo Emojione\Emojione::shortnameToImage($message->message); 
                 } else { 
                  $sticker = $db->query("SELECT * FROM stickers WHERE id='".$message->sticker_id."'"); 
                  $sticker = $sticker->fetch_object(); 
                  echo '<img src="'.$system->getDomain().'/img/stickers/'.$sticker->pack_id.'/'.$sticker->path.'" style="height:80px;width:80px">'; 
                 } 
                 ?> 

                </div> 
               </div> 
              </div> 
              <? } ?> 
              <!--/wel abbo--> 
              <? 
             } 
            } 
            ?> 
           </div> 
          </div> 

          <div class="col-lg-12 col-md-12 col-sm-12"> 
           <div class="conversation-input" style="position:static;"> 
            <div class="row"> 
             <div class="input-group message-input"> 
        <?php if((!isset($blocked_msg))&&($user->expire != NULL)) {?>      
              <input type="text" id="message" placeholder="<?=$lang["Enter_Message"]?>" class="form-control input-lg message-input no-border" required> 
              <span class="input-group-btn"> 

               <a href="#" class="btn btn-default" data-toggle="modal" data-target="#send-gift"><i class="fa fa-fw fa-gift"></i></a> 
              </span> 
         <?php } if(isset($blocked_msg)) { ?> 
         <input type="text" id="message" placeholder="JE BENT GEBLOKKEERD DOOR DEZE GEBRUIKER." class="form-control input-lg message-input no-border" required> 
         <?php } ?> 

             </div> 
            </div> 
           </div> 
          </div> 

Answer 1

Sie sollten nicht setInterval auf AJAX verwenden. Statt setTimeout verwenden aus dem Inneren des Erfolgs und dann scrollen nach unten jedes Mal - unter der Annahme, dass ist das, was die getNiceScroll tut, können Sie dies tun:

function refreshChat() { 
    var id = "'.$convers_id.'"; 
    var receiver = "'.$system->getFirstName($second_user->full_name).'"; 
    $.get("'.$system->getDomain().'/ajax/refreshChat.php?id=" + id + "&receiver=" + receiver, function(data) { 
    $("#messages").html(data); 
    $(".conversation-message-list").getNiceScroll(0).scrollTop($(".conversation-content").height(), -1); 
    setTimeout(refreshChat, 3000); 
    }); 
} 

Auch brauchen Sie die komplette Chat schicken? Warum fügst du nicht einfach neue Nachrichten an? Dann können Sie testen, ob es etwas Neues und nichts tun, wenn nicht ist:

$("#messages").append(data);