1

我正在尝试创建一个带有动画的字符串随机化器，但它不起作用。

我使用此函数按照浏览器选择的帧速率调用该函数：

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' 生成一个字符串，但只生成一次 - 所以该函数可以工作，但它不会一直被调用 =/

为什么会这样？

4

1 回答 1

3

当您使用 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) });
于 2012-05-29T02:35:00.113 回答