JavaScript Loop Animation Interval

Question

I'm trying to get this loop to return a value, for each value in an array every 1 second.

The returned value is a random value generated earlier, and each loop will add i to the number and output it. (ran[0]+i) (ran[1]+i) etc.

I need the output in the same order as my example, but with a 1 second interval and something to generate my returns/consolelogs instead of having to type in all 4, or however many I use (could be random).

The code is for an animation but I cannot get the SVG working here and its irrelevant to the problem I think.

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

Redu · Accepted Answer · 2016-06-25 13:30:04Z

2

You may do like this;

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

Or by using var instead of let you can still do like this by utilizing an IIFE to return a callback with an encapsulated i value.

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

Update: I hope i am getting closer.. I just console.log the array itself but the items increase by i in each round. (10 rounds / frames)

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++){
	setTimeout(function(){console.log(randar.map(e=> e+i))} ,1000*i);
}

Note: I use arrows mostly but if you have concerns about IE or Safari then it's best to replace them with conventional function calls.

edited Jun 25, 2016 at 13:30

answered Jun 25, 2016 at 11:15

Redu

26.3k6 gold badges61 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Chris Over a year ago

Sorry I might need to be more clear. I need the loop to return all values in the array, and than again 1 second later (10 in total).

Redu Over a year ago

@Chris I have updated my answer accordingly. Also slightly modified your array generation code. I hope it's fine now.

Chris Over a year ago

The first was closer, I will try explain again. 1. Generate Random Values and put into Array. 2. Loop through array outputting all values each loop + i (ran[0]+i) (ran[1]+i) every 1 second. You can see example of output in my first post.

Chris Over a year ago

Actually, the last one you post is great but I only need to randomize the values once and than its increasing those values by 0 on first ouput, 1 on second, 2 on third, 3 on fourth - that is why I add the i.

Chris Over a year ago

Yes, 10 is just the number of frames, imagine a circle getting bigger - starting with 132 (randomly generated), it would be 133, 134, 135... but I want to output X number of these circles (in this example X=4). The problem I was having was with the Interval/Timeout that is required, I am really bad with these. If I had 8 values in array, it would output those 8 values from [0]-[7] and each time the output would be 1 greater, because the value added is 1 greater.

|

Collectives™ on Stack Overflow

JavaScript Loop Animation Interval

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related