卡在數字和字母隨機化javascript

Question

所以我被困在這個腳本，並且無法弄清楚如何完成它。我需要它在完成其動畫之後將new_string更改爲舊字符串，然後在012或64分鐘後用setInterval將新舊字符串中的相同動畫運行到我將從JSON中抓取的新字符串。下面是該腳本：

$(document).ready(function() { 
    var old_string = "first word"; 
    var new_string = "second word"; 

    while (old_string.length < new_string.length) { 
     old_string += " "; 
    } 
    while (new_string.length < old_string.length) { 
     new_string += " "; 
    } 

    for (i = 0; i < 18; i++) { 
     var cell_id = create_cell(); 
     cycle_characters(old_string.charCodeAt(i), new_string.charCodeAt(i), cell_id); 
    } 
}); 

var create_cell = function() { 
    var $rack = $("#rack"); 
    var cell_id = "cell_" + $("#rack .cell").size() + 1; 
    $rack.append($("<span class='cell first_run'>").attr("id", cell_id)); 
    return cell_id; 
} 

var cycle_characters = function (old, newer, cell_id) { 
    // 32 = space; 126 = tilde 
    // low-range ASCII only 
    var lower_limit = 32; 
    var upper_limit = 126; 

    var old = parseInt(old); 
    var newer = parseInt(newer); 

    if (old > upper_limit || old < lower_limit) { 
     old = lower_limit; 
    } 
    if (newer > upper_limit || newer < lower_limit) { 
     newer = lower_limit; 
    } 

    if ("string" != typeof cell_id) { 
     cell_id = $(cell_id).attr("id"); 
    } 

    var $cell = $("#" + cell_id); 

    $cell.text(String.fromCharCode(old)); 
    if (newer != old) { 
     var call = "cycle_characters(" + (old + 1) + ", " + newer + ", " + cell_id + ")"; 
     if ($cell.hasClass("first_run")) { 
      $cell.removeClass("first_run"); 
      setTimeout(call, 1000); 
     } else { 
      setTimeout(call, 20); 
     } 
    } 

} 

這裏也是一個JsFiddle

Answer 1

這裏有一個更新的例子可以做你想做什麼：

http://jsfiddle.net/ktEJy/2/

注意，setNewWord功能會明顯除了像我一樣從數組中隨機選擇一個詞外，還需要從其他來源獲取下一個詞。

和對子孫後代的，這裏是代碼：

$(document).ready(function() { 
    var old_string = "First Word"; 
    var new_string = "Second Word"; 

    function doTheDo() { 
     $('#rack').html(""); 
     while (old_string.length < new_string.length) { 
      old_string += " "; 
     } 
     while (new_string.length < old_string.length) { 
      new_string += " "; 
     } 

     for (i = 0; i < new_string.length; i++) { 
      var cell_id = create_cell(); 
      cycle_characters(old_string.charCodeAt(i), new_string.charCodeAt(i), cell_id); 
     } 
    } 

    function setNewWord() { 
     // grab the word from some json 
     words = ['Abracadabra', 'Foo bar baz splat', 'Bingo Dingo Ringo'] 
     new_string = words[Math.floor(Math.random() * words.length)] 
     doTheDo(); 
    } 

    function create_cell() { 
     var $rack = $("#rack"); 
     var cell_id = "cell_" + $("#rack .cell").size() + 1; 
     $rack.append($("<span class='cell first_run'>").attr("id", cell_id)); 
     return cell_id; 
    } 

    function cycle_characters(old, newer, cell_id) { 
     // 32 = space; 126 = tilde 
     // low-range ASCII only 
     var lower_limit = 32; 
     var upper_limit = 126; 

     var old = parseInt(old); 
     var newer = parseInt(newer); 

     if (old > upper_limit || old < lower_limit) { 
      old = lower_limit; 
     } 
     if (newer > upper_limit || newer < lower_limit) { 
      newer = lower_limit; 
     } 

     if ("string" != typeof cell_id) { 
      cell_id = $(cell_id).attr("id"); 
     } 

     var $cell = $("#" + cell_id); 

     $cell.text(String.fromCharCode(old)); 

     var current = ''; 
     $('.cell').each(function (el, i) { 
      current += $(i).text(); //console.info(i); 
     }); 

     if (current != new_string && newer != old) { 
      if ($cell.hasClass("first_run")) { 
       $cell.removeClass("first_run"); 
       setTimeout(function() {cycle_characters(old+1, newer, cell_id);}, 1000); 
      } else { 
       setTimeout(function() {cycle_characters(old+1, newer, cell_id);}, 20); 
      } 
     } else if (current == new_string) { 
      old_string = new_string; 
      setTimeout(function() { setNewWord();}, 3000); 
     } 
    } 
    doTheDo(); 
});