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()并将结果传递给requestAnimationFrame，而不是将函数create(chars, length)传递给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) });

试图用动画制作随机字符串生成器

1 个答案: