Question

我正在尝试构建一个虚假的聊天框。我可以使用jQuery从数据库中检索数据，以返回JSON数组。然后，我希望JSON对象中包含的每行文本一次一行显示在页面上但是代码必须暂停一段时间，如果文本显示它之前键入行通常需要的时间长度。然后代码必须等待它在迭代到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是一个包含平均“每秒单词数”值的变量。

问题是所有文本行都不按顺序显示。我无法让它等待前一行显示在它移动到下一行之前......

真的需要帮助这个家伙...

Answer 1

我没有一个好的方法来测试这个，但你应该考虑做这样的事情：

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

我添加了一点点随机位，以帮助为聊天序列提供更实际的可变时序。

Answer 2

我认为这对你有用。

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

    function appendText(content) {
        var delay = Math.round(countWords(content) / WPS) * 1000;
        if ( i < l - 1 ) {
            setTimeout(function(){
                $('#chatBox #chatBody').append('<p>'+ content +'</p>');
                appendText(mainDialogue[i++].content);
            }, delay);
        }
    };

    appendText(mainDialogue[i++].content);
});

Answer 3

您可以使用函数迭代超时，而不使用$ .each，请参阅下面的

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

    var mainDialogue = data.item;    
    var l = mainDialogue.length;    
    var actual = -1;

    function showNextMessage(){

      actual++;

      if( actual >= l ) return;

      var content = mainDialogue[actual].content;

      var delay = Math.round(countWords(content) / WPS) * 1000;


      setTimeout(function(){

          $('#chatBox #chatBody').append('<p>'+ content +'</p>');
          showNextMessage();

      },delay);      

    }

    showNextMessage();

});

Answer 4

我通常会创建一个Iterator类，其中包含以下内容：

Iterator = function (iterable) {

    var keys = [];
    for (var i in iterable)
        keys.push(i);
    var pointer = 0;

    this.next = function () {
        return keys[pointer++];
    }
    this.hasNext = function () {
        return i < keys.length;
    }

}

通过这种方式，您不必直接遍历对象，您可以像在Java中一样轻松地跟踪对象中的位置。

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

    var iter = new Iterator(mainDialogue);
    (function appendChat () {
        var d = iter.next();
        var delay = Math.round(countWords(d.content) / WPS) * 1000;
        $('#chatBox #chatBody').append('<p>'+ d.content + '</p>');
        if (iter.hasNext())
            setTimeout(appendChat, delay);
    })();

});

在下一次迭代之前暂停迭代JSON对象

4 个答案: