1

我正在尝试建立一个假的聊天框。我可以使用 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 是一个包含平均“每秒单词数”值的变量。

问题是所有文本行都无序显示。我不能让它等待上一行显示，然后再移动到下一行...

真的需要这个人的帮助......

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 回答
0

我认为这对你有用。

$.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);
});
于 2013-08-16T17:05:19.620 回答
0

您可以使用函数进行超时迭代，而不使用 $.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();

});
于 2013-08-16T17:11:17.240 回答
0

我通常会创建一个 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);
    })();

});
于 2013-08-16T17:11:35.297 回答