iterate through JSON object with pause before next iteration

iterate through JSON object with pause before next iteration

I am trying to build a fake chat box. I can retrieve the data from the
database using jQuery to return a JSON array ok. I then i want each line
of text contained in the JSON object to display on the page one line at a
time BUT the code must pause for the length of time it would normally take
to type the line if text before it displays it. then the code must wait
for it to be displayed before it iterated on to the next value in the JSON
object. I hope all that makes sense...
$.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);
});
});
This is what i have and it kinda works... countWords() is a function that
returns the number of words in the sentence and WPS is a variable that
contains the average "Words Per Second" value in it.
The issue is that all the lines of text are displayed out of sequence. i
can't get it to wait for the previous line to be displayed before it moves
on to the next one...
Really need help with this one guys...