Creating a looping iterated list in array

Question

I currently have this as an array:

    const arr = Array.from({ length: 10 }, (_, i) => `1 (${i + 1}).jgp`);
    
    console.log(arr);

Credit goes to @Ori Drori

I would like this array to constantly loop in the order it is in so that the output would be:

1 (1).jgp,1 (2).jgp,1 (3).jgp,1 (4).jgp,1 (5).jgp,1 (6).jgp,1 (7).jgp,1 (8).jgp,1 (9).jgp,1 (10).jgp,1 (1).jgp,1 (2).jgp,1 (3).jgp,1 (4).jgp,1 (5).jgp,1 (6).jgp,1 (7).jgp and so on....

The purpose of this is, because I would like to use these images to form an animation in HTML5 canvas, so that it would appear as a looping animation:

const images = Array.from({ length: 41 }, (_, i) => `1 (${i + 1}).jpg`);

let intervalId = setInterval(function () {
  if (images.length === 0){
    clearInterval(IntervalId);
    return;
  }
  // this remove the first image from the array and return it
  let imageName = images.splice(0, 1); 
  sendChat(`/set image http://mywebsite/directory/${imageName}`)
}, 300)

Please note that sendChat(`/set image are pre-defined variables in my website. The concern is not with the animation, I need help on looping through the array.

All help is appreciated, thanks.

so that it would appear as a looping animation Better to iterate the array again rather than keep adding elements to it. — gurvinder372
– gurvinder372, Commented Oct 24, 2017 at 10:23

Ori Drori · Accepted Answer · 2017-10-24 10:37:12Z

2

You don't need an infinite array. You need to iterate the indexes in a cyclic way - whenever you get to the last index, you go back to the start.

Use window.requestAnimationFrame() to render a frame, and if the runFlag is true, request the next frame. Use the remainder operator to cycle the the index:

let runFlag = true;
const loopImages = (i = 0) => requestAnimationFrame(() => {
  console.log(`1 (${i + 1}).jgp`); // render the image
  
  runFlag && loopImages((i + 1) % 10); // next frame
});

loopImages();

setTimeout(() => runFlag = false, 1000); // demo of stopping the loop

edited Oct 24, 2017 at 10:37

answered Oct 24, 2017 at 10:26

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

2 Comments

user37 Over a year ago

Awesome! Thanks again :) I have a quick question, I'm using this at the moment: pastebin.com/raw/ReVDaVBM This is running the animation really fast, in my previous code, I set an interval of 300ms between each line of "sendChat(/set image http://mywebsite.com/${arr[i]})" How can I implement this here?

Ori Drori Over a year ago

You can't. This is a fixed 16ms frame rate. Checkout @NinaScholz answer. She uses SetInterval, which allows you to set the interval :)

Nina Scholz · Accepted Answer · 2017-10-24 10:24:32Z

2

You could use a closure over the counter and adjust with the reminder operator %.

function loop() {
    var i = 0;
    return function () {
        console.log(`1 (${++i}).jgp`);
        i %= 10;
    };
}

setInterval(loop(), 200);

answered Oct 24, 2017 at 10:24

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Collectives™ on Stack Overflow

Creating a looping iterated list in array

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related