試圖用動畫制作隨機字符串生成器

Question

我正在嘗試使用動畫創建一個字符串隨機數，但它不起作用。

我使用此函數按照瀏覽器選擇的幀速率調用該函數：

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback,  element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

其次是我的生成和顯示字符串的方法：

function create(chars,string_length){
output = [];
var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }


    output.push(randomstring);

    document.getElementById('cb').innerHTML = (output.join(''));
}


var chars =  "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
var length = 20;

requestAnimFrame( create(chars,length) );

它生成一個字符串到我的div'id'但只有一次 - 所以函數工作但它不是一直被調用= /

為什么會這樣？

Answer 1

當您使用requestAnimationFrame時，它只會運行一次該函數。 您需要修改create()以再次調用requestAnimationFrame。 此外，您犯了另一個錯誤：您實際上調用create(chars, length)然后將結果傳遞給requestAnimationFrame，而不是將函數create()傳遞給requestAnimationFrame。 這是一個應該工作的版本：

function create(chars,string_length){
    output = [];
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }


    output.push(randomstring);

    document.getElementById('cb').innerHTML = (output.join(''));

    requestAnimFrame(function(){ create(chars,string_length); });
}


var chars =  "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
var length = 20;

requestAnimFrame(function(){ create(chars,length) });