자바 스크립트 루프 애니메이션 간격

Question

이 루프가 1 초마다 배열의 각 값에 대해 값을 반환하려고합니다.

반환 값은 이전에 생성 된 임의의 값이며 각 루프는 숫자에 i를 더하여 출력합니다.

출력이 내 예제와 같은 순서로 필요하지만 1 초 간격과 내 반환/콘솔 로그를 생성하는 것과 같은 출력이 필요합니다 (예 : [0] + i). 모두 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

당신은 다음과 같이 할 수 있습니다

;

또는 캡슐화 된 i 값 콜백을 반환하는 인생을 이용하여 당신은 여전히 ​​다음과 같이 할 수 var를 사용하는 대신 let에 의해

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); 
 
}

.

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 나 사파리에 대한 우려가 있다면 그것은 기존의 함수 호출로 교체하는 것이 가장 좋습니다.