1

偽のチャット ボックスを作成しようとしています。jQuery を使用してデータベースからデータを取得し、JSON 配列を返すことができます。次に、JSONオブジェクトに含まれるテキストの各行を一度に1行ずつページに表示したいのですが、テキストが表示される前に行を入力するのに通常かかる時間の間、コードを一時停止する必要があります。次に、JSON オブジェクトの次の値に反復する前に、コードが表示されるのを待つ必要があります。すべてが理にかなっていることを願っています...

$.getJSON('includes/get-mentor-dialogue.php?e=' + new Date().getTime(), function(data){
    var mainDialogue = data.item;
    var l = mainDialogue.length;

    $.each(mainDialogue, function(index, d){
        var delay = Math.round(countWords(d.content) / WPS) * 1000;
        setTimeout(function(){$('#chatBox #chatBody').append('<p>'+ d.content +'</p>');},delay);
    });
});

これは私が持っているもので、ちょっとうまくいきます... countWords() は文の単語数を返す関数で、WPS は平均 "Words Per Second" 値を含む変数です。

問題は、テキストのすべての行が順不同で表示されることです。次の行に移動する前に、前の行が表示されるのを待つことができません...

本当にこの1人の助けが必要です...

4

4 に答える 4

0

これをテストする良い方法はありませんが、次のようなことを検討する必要があります。

$.getJSON('includes/get-mentor-dialogue.php?e=' + new Date().getTime(), function(data){
    var mainDialogue = data.item;
    var l = mainDialogue.length;

    var delay = 0;

    $.each(mainDialogue, function(index, d){

        var myDelay = Math.round(countWords(d.content) / WPS) * 1000;
        myDelay+=delay; // how long it takes me to render + the guy before me
        delay=myDelay + (Math.random()*2000); // this will give a random pause between each step

        setTimeout(function(){$('#chatBox #chatBody').append('<p>'+ d.content +'</p>');},myDelay);
    });
});

チャット シーケンスにより現実的な可変タイミングを与えるために、少しランダムなビットを追加しました。

于 2013-08-16T17:04:41.910 に答える