スクロールバーを一番下に置いてください。ループ内では一度しか表示されません。

Question

setInterval（）を使用してデータを繰り返し取得することによって、以前のメッセージを表示するチャットアプリがあります。ほとんどのチャットアプリでは、最後のメッセージ（つまり、一番下）にスクロールバーを置いておきたいと思っています。しかし、ここでは、setIntervalを使用してデータを繰り返し取得する際に、スクロールバーを下に保持するコードを実行するため、スクロールして前のメッセージをチェックすることが不可能になるため、問題が発生します。

<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(); 
     //chatTimer = setTimeout(fetch_chat, 500); //request the chat again in 2 seconds time 
     $("#messages").animate({ scrollTop: $(document).height() }, "fast"); 


    } 

    }); 

} 

$(document).ready(function() { 
fetch_data(); 

    $(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(); 
    }); 

    function scrollToBottom() { 
    $("#messages").scrollTop(1e10); // Lazy hack 
} 

setInterval(function() { 
    fetch_chat(); 
}, 500); 

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

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

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

plzは私にこれを行うための正しい方法を教えてください。

Answer 1

データがフェッチされるのが初めての場合に設定する変数をsetIntervalメソッドの外に保持します。最初にスクロールします。その後、それを変更しても、それは決して再びスクロールしません。

var currentID = null; 
var chatTimer = null; 
var firstTime = true; 

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(); 
     //chatTimer = setTimeout(fetch_chat, 500); //request the chat again in 2 seconds time 
     if (firstTime) { 
      firstTime = false; 
      $("#messages").animate({ scrollTop: $(document).height() }, "fast"); 
     } 
    } 

    }); 

}