jquery .each aspettando che la funzione termini prima di continuare con il ciclo

Question

Sto essenzialmente cercando di scorrere una collezione di tag LI e inserire del testo per simulare l'aspetto di qualcuno che scrive un elenco di cose da fare. Funziona, ma scrive contemporaneamente ciascuno degli elementi dell'elenco invece di attendere. C'è un modo semplice per raggiungere questo obiettivo? Ho una configurazione JS Fiddle qui: http://jsfiddle.net/fZpzT/ ma il codice è simile a questo. Grazie.

function addListItems() { 
var str = { 
    listitem1:'personal background check', 
    listitem2:'look into my sketchy neighbor', 
    listitem3:'look up my driving record', 
    listitem4:'pick up milk', 
    listitem5:'wash the car' 
} 

$('.list-container li').each(function(){ 
    var z = $(this).attr('id'); 
    var str2 = str[z]; 
    var delay = 0; 
    for (var i = 0; i <= str2.length; i++) { 
     (function(str2){ 
      delay += 100 + Math.floor(Math.random()*11)*6; 
      setTimeout(function(){ 
       appendStr(str2);  
      },delay); 
     })(str2[i]) 
    } 
    function appendStr(str2) { 
     $('#'+ z).append(str2); 
    } 
}); 
} 

Answer 1

ne dite di semplificazione? Utilizzare due variabili per iterare l'intero contenuto di una struttura di dati leggermente modificata in un singolo ciclo. Come questo. http://jsfiddle.net/cXykd/

var strings = 
[ 
    { "id":"listitem1", "text": "write the first item" }, 
    { "id":"listitem2", "text": "write the second item" }, 
    { "id":"listitem3", "text": "write the third item" }, 
    { "id":"listitem4", "text": "write the fourth item" }, 
    { "id":"listitem5", "text": "write the fifth item" }, 
] 

var stringsIndex = 0; 
var textIndex = 0; 

AddString(); 

function AddString(){ 
    if (stringsIndex < strings.length){ 
     if (textIndex >= strings[stringsIndex].text.length) 
     { 
      stringsIndex++; 
      if (stringsIndex == strings.length) 
      { 
       return; 
      } 
      textIndex = 0; 
     } 

     $("#" + strings[stringsIndex].id).append(strings[stringsIndex].text[textIndex]); 
     textIndex++; 

     var delay = 10 + Math.floor(Math.random()*11)*6; 
     setTimeout(AddString, delay); 
    } 
} 

Answer 2

Fai il ritardo cumulato: Demo on jsFiddle

var str = { 
    listitem1: 'write the first item', 
    listitem2: 'write the second item', 
    listitem3: 'write the third item', 
    listitem4: 'write the fourth item', 
    listitem5: 'write the fifth item' 
}, cumulativeDelay = 0; 

$('.list-container li').each(function() { 
    var z = $(this).attr('id'); 
    var str2 = str[z]; 
    var delay = cumulativeDelay; 
    for (var i = 0; i <= str2.length; i++) { 
     (function (str2) { 
      delay += 100 + Math.floor(Math.random() * 11) * 6; 
      setTimeout(function() { 
       appendStr(str2); 
      }, delay); 
     })(str2[i]) 
    } 
    cumulativeDelay = delay; 
    function appendStr(str2) { 
     $('#' + z).append(str2); 
    } 
    $(this).css('color', 'red'); 
}); 

Answer 3

vorrei invertire il funzionamento:

1. Si inizia con le stringhe che si desidera scrivere,

2. Per ogni stringa:

   1. Trovare la voce corrispondente elenco (per id)
   2. Scrivere l'intera stringa in stile macchina da scrivere

   3. Richiamare l'iterazione successiva al termine.

      var strings = [ 
          'personal background check', 
          'look into my sketchy neighbor', 
          'look up my driving record', 
          'pick up milk', 
          'wash the car' 
      ]; 
      
      function iterate(strings, idx) 
      { 
          if (idx >= strings.length) { return; } 
      
          var id = 'listitem' + (idx + 1), 
          el = document.getElementById(id); 
      
          typewriter(el, strings[idx], 0, function() { 
          iterate(strings, idx + 1); 
          }); 
      } 
      
      function typewriter(el, str, idx, cb) 
      { 
          if (idx >= str.length) { 
          return cb(); 
          } 
      
          setTimeout(function() { 
          el.innerText = str.substr(0, idx + 1); 
          typewriter(el, str, idx + 1, cb); 
          }, 100 + Math.floor(Math.random() * 11) * 6); 
      } 
      

Demo