setTimeout（）関数はスクロールを停止します

私は簡単なチャットアプリを作成しました。私はsetTimeoutを使用して、0.5ミリ秒ごとにメッセージをリフレッシュし、scrolltopを使用してスクロールバーを下に保ちました。setTimeout（）関数はスクロールを停止します

<?php 
    session_start(); 
    ?> 
     <html> 
     <head> 
     <title>Live Table Data Edit</title> 
     <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
    /> 
     <script 
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
     </head> 
     <body> 
      <div class="container"> 
       <br /> 
       <br /> 
       <br /> 
       <div class="table-responsive"> 
        <h3 align="center">You Are : <?php echo $_SESSION['name']; ?></h3><br /> 
        <div id="live_data"></div>     
       </div> 
      <div id="messages" style=" border: 1px solid #ccc; 
     width: 350px; 
height: 210px; 
padding: 10px; 
overflow-y:scroll; 
display:none;"></div> 
      <div class="area" style="display:none"> 
      <textarea id="text" name="text"style=" border: 1px solid #ccc; 
width: 350px; 
height: 50px; 
padding: 10px;" ></textarea> 
      <input type="submit" id="sub" name="sub" value="Send" /> 
       </div> 
      </div> 


<script> 
var currentID = null; 
var chatTimer = null; 

function fetch_data() { 
$.ajax({ 
url: "select.php", 
method: "POST", 
success: function(data) { 
    $('#live_data').html(data); 
    //fetch_chat(); 
    } 
    }); 
} 

function fetch_chat() { 
$.ajax({ 
url: "fetch_chat.php", 
method: "POST", 
data: { 
    id: currentID 
}, 
dataType: "text", 
success: function(data) { 
    $("#messages").show(); 
    $('#messages').html(data); 
    $("div.area").show(); 

    $("#messages").animate({ scrollTop: $(document).height() }, "fast"); 
    return false; 
    chatTimer = setTimeout(fetch_chat, 500); //request the chat again in 2 seconds time  
    } 

    }); 
} 

$(document).ready(function() { 

    $(document).on('click', '.first_name', function() { 
    currentID = $(this).data("id1"); 
    //immediately fetch chat for the new ID, and clear any waiting fetch 
    timer that might be pending 
    clearTimeout(chatTimer); 
    fetch_chat(); 
}); 

$("#sub").click(function() { 
var text = $("#text").val(); 

$.post('insert_chat.php', { 
    id: currentID, 
    msg: text 
}, function(data) { 
    $("#messages").append(data); 
    $("#text").val(''); 
    }); 
}); 

fetch_data();//this will also trigger the first fetch_chat once it completes 
    }); 
    </script> 
    </body> 
    </html>

すべては私のニーズに合わせなど正常に動作しますが、私はsetTimeout()を{私は今、それを使用してMと}を使用したときにスクロールが立ち往生と私はsetTimeoutスクロール一部の作業罰金が、他のユーザーを削除するときに新しいを参照してくださいカントメッセージはリアルタイムで反映されます。

出典

2017-11-04 max tech

コードが期待どおりに動作しています。 5msごとにスクロールが上に移動します。これは、スクロールがリセットされるたびに5msごとにスクロールするユーザーの試みを効果的に無効にします。

いくつかのオプション：

は、あなたのチャットを保持し、それに応じてコンテンツを管理するために、固定サイズでdiv要素を使用しています。

新しいメッセージがある場合にのみスクロールを更新するようにします。これを行うには、etagsまたは最後のメッセージをキャッシュし、次の要求に同じ最後のメッセージがあることを確認します。

出典

2017-11-04 18:29:23

plzは私にコードを提供しています –

setTimeout（）関数はスクロールを停止します

答えて

関連する問題