遅延jqueryが動作しません

Question

こんにちは、私のタイミング機能が動作していない理由は分かりません。私はAJAXでJSONを取得し、私は時間1または2秒を作成することにより、それぞれのメッセージを表示したい、それは動作しますが、ただ、初めて...

$(document).ready(function() { 
    $.ajax({ 
     type: 'GET', 
     url: 'conversation.json', 
     dataType: 'json', 
     success: function (data) { 
      var conversation = data.conversation1; 
      $.each(conversation, function(i, user) { 
       setTimeout(function() { 
        $('<li>').attr({ 
         class : 'list-group-item', 
        }).text(user.nombre + " : " + user.text). 
        appendTo('#messages'); 
       }, 3000); 
      }); 
     } 
    }); 
}); 

を次のコードを考えてみたが、その後、すべてのメッセージ一度に表示されます。

もし何かが私に何が起こっているのか理解してください助けることができます。

ありがとう、私は検索を続けます。 :(

Answer 1

ちょうどそれは、各メッセージに対してインクリメント遅延として表示されるようにするには、反復回数によって、あなたの.eachループでタイムアウト遅延を掛け、以下を守って...

$.each(conversation, function(i, user) { 
    setTimeout(function() { 
     $('<li>').attr({ 
      class : 'list-group-item', 
     }) 
     .text(user.nombre + " : " + user.text) 
     .appendTo('#messages'); 
    }, 3000 * (i + 1)); // 3000, 6000, 9000 etc. 
}); 

JSFiddle Link - 。簡素化デモ