JavaScriptループのアニメーション間隔

Question

私はこのループを1秒ごとに配列の各値に対して値を返すようにしようとしています。

戻り値は、以前に生成されたランダム値であり、各ループは数値にiを加算して出力します。

私の例と同じ順序で出力を必要としますが、1秒間隔で何かを返します。返り値/コンソールログを生成するものです。 4つすべてをタイプする必要がありますが、多くの場合、私は（ランダムになる可能性があります）使用します。

コードはアニメーション用ですが、私はここでSVGを動作させることはできません。それは私が思う問題とは無関係です。あなたはこのように行うことが

var ran = []; 
 
var qan = 4; 
 
for(i=0;i<(qan);i++){ 
 
    rd = Math.floor(Math.random()*360); 
 
    ran.push(rd); 
 
}; 
 

 
for(i=0;i<10;i++){ 
 
    /*need to have (random.length) number of console logs and interval loops by 1 second*/ 
 

 
console.log((ran[0]+i) + " loop " + (i)); 
 
console.log((ran[1]+i) + " loop " + (i)); 
 
console.log((ran[2]+i) + " loop " + (i)); 
 
console.log((ran[3]+i) + " loop " + (i)); 
 
};

Answer 1

。

var ran = []; 
 
var qan = 4; 
 
for(let i=0;i<(qan);i++){ 
 
    rd = Math.floor(Math.random()*360); 
 
    ran.push(rd); 
 
    setTimeout(function(){console.log(ran[i])},1000*i); 
 
}

それとも、まだカプセル化i値でコールバックを返すために生命維持を利用することにより、このように行うことができますvar代わりのletを使用します。

var ran = []; 
 
var qan = 4; 
 
for(var i=0;i<(qan);i++){ 
 
    rd = Math.floor(Math.random()*360); 
 
    ran.push(rd); 
 
    setTimeout((function(j){ return function(){ console.log(ran[j]) } })(i),1000*i); 
 
}

アップデート：私は私が近づいています願って..私はちょうど配列自体をCONSOLE.LOGが、項目は、各ラウンドでi増加。 （10回/フレーム）

var randar = new Array(4).fill().map(e => ~~(Math.random()*360)); 
 
console.log("starting random array ",randar); // let's see how the random array starts 
 
for (let i = 0; i < 10; i++){ 
 
\t setTimeout(function(){console.log(randar.map(e=> e+i))} ,1000*i); 
 
}

注：私は主に矢印を使用していますが、IEやSafariに懸念を持っている場合、それは通常の関数呼び出しに置き換えることをお勧めします。