javascript - 迭代 JSON 对象，并在下一次迭代之前暂停

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

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

});