0

私は非常に単純なjQueryベースのチャットルームに取り組んでいます（入門ワークショップで使用されます）。現在のチャットは、400pxの高さとオーバーフロー自動に設定されたdivに表示されます。

jQueryの「ロード」関数は、データベースからHTML形式のチャットを取得し、それらをdivに配置するために使用されます。

チャットdivが常に一番下までスクロールされるようにする非常に単純なコードがあります。このコードは、load関数の完了コールバック機能を使用して呼び出されるscrollToBottomという名前の関数にあります。

loadステートメントはgetChatと呼ばれる関数内にあります。この関数は、ページの準備ができたときに呼び出され、その後1秒に1回呼び出されます。関連するコードのチャンクは次のとおりです。

$(function()
{
    getChat();
    setInterval("getChat();", 1000);
});


function getChat()
{
    $("#chatDiv").load("chat_server.php?get_chats=true", scrollToBottom() );
}


function scrollToBottom()
{
    var chatHeight = document.getElementById("chatDiv").scrollHeight;
    $("#chatDiv").scrollTop( chatHeight );
}

問題： getChatが初めて呼び出されたときに、divが一番下までスクロールしません。後続の呼び出し（setInterval経由）では、スクロールは正常に機能します。

これが私がこれまでに知っている/行ったことです：

コールバックは最初に呼び出されますが、scrollHeightにアラートを送信したとき、最初は「400」で、その後は「441」でした（つまり、divサイズよりも大きいコンテンツがある場合のはずです）。

441の高コンテンツのscrollTop値400は、関係なく下にスクロールする必要がありますが、scrollToBottomにハード値400を入力すると、問題が解決しません。これにより、問題はロードコールバックではなくCSS/スクロールに関連していると思います。

チャットdivは最初は空ですが、nbspまたは1文字を含めるように変更しても、問題は解決しませんでした。DIDのスクロールを要求するのに十分なハードコードされたコンテンツでdivを開始させると、問題が解決します。

この段階では、scrollTopが機能するためには、スクロールバーが表示/アクティブである必要があるようです...しかし、最初に機能しない理由は説明されていません-コールバックはコンテンツの後に発生することを意図しているためですロードされました（したがって、スクロールバーが表示/アクティブになっている必要があります）...

さらに奇妙なことに、コールバック関数が匿名のインライン関数である場合は正常に機能します...

$(function()
{
    getChat();
    setInterval("getChat();", 1000);
});


function getChat()
{
   $("#chatDiv").load("chat_server.php?get_chats=true", 
     function()
     {
        var chatHeight = document.getElementById("chatDiv").scrollHeight;
        $("#chatDiv").scrollTop( chatHeight );
     }
   );
}

このバージョンは、最初とそれ以降のすべての時間で正常に動作します...

誰かがこの状況に光を当てることができますか？ありがとう、グレッグ

4

1 に答える 1

0

javascriptでは、匿名かどうかに関係なく、関数はファーストクラスです。つまり、引数として渡すことができます。匿名フォームを使用したり、関数を初めて呼び出す必要はありません。ロードする引数としてscrollToBottomを渡すだけです。

$("#chatDiv").load("chat_server.php?get_chats=true", scrollToBottom);

同様に、setInterval呼び出しを単純化できます。

setInterval(getChat, 1000);
于 2011-07-14T06:27:42.887 に答える