CODEWITHSUNDEEP
javascriptloops
qtt qtt
qtt qtt

Reputation: 187

Creating a repeated loop with timed intervals in between

I am trying to create a loop that waits 5 second before executing the next line. Here is what I have tried, after researching online:

(Please note, that I realise it won't display the image. I just want it to display the text in the alert)

setInterval(myMethod, 5000);

    function myMethod( )
    {
            alert('Image   https://website.com/t2EzsJj.png')
            alert('Image   https://website.com/TrRRE0v.png')
            alert('Image   https://website.com/vG8BkNG.png')
            alert('Image   https://website.com/uddMAhU.png')
            alert('Image   https://website.com/l9IpE9g.png')
            alert('Image   https://website.com/Lvv9S1s.png')
            alert('Image   https://website.com/od3robw.png')
            alert('Image   https://website.com/dl4HDpd.png')
            alert('Image   https://website.com/BJV4X1n.png')
            alert('Image   https://website.com/fC2HcsB.png')
            alert('Image   https://website.com/xtDuuGg.png')
            alert('Image   https://website.com/2VOBpXL.png')
            alert('Image   https://website.com/u3zKYpC.png')
            alert('Image   https://website.com/yymr6R8.png')
            alert('Image   https://website.com/cz8cZE0.png')
            alert('Image   https://website.com/rbYFSpp.png')
            alert('Image   https://website.com/zqAMDi9.png')
            alert('Image   https://website.com/Xmt84Qz.png')
            alert('Image   https://website.com/7wixIIK.png')
            alert('Image   https://website.com/Yfm3yGw.png')
            alert('Image   https://website.com/2DYKO6L.png')
            alert('Image   https://website.com/GrudZEl.png')
            alert('Image   https://website.com/OT115fy.png')
            alert('Image   https://website.com/k4bnBDa.png')
            alert('Image   https://website.com/tXTpcV8.png')
            alert('Image   https://website.com/PdkCufJ.png')
            alert('Image   https://website.com/NVaXfCV.png')
            alert('Image   https://website.com/5N69l7R.png')
            alert('Image   https://website.com/B2V8OKg.png')
            alert('Image   https://website.com/MOeIxJV.png')
    }
}

I would like the code to have a 5 second interval between each alert, so it would be like this:

function myMethod( )
{
        alert('Image   https://website.com/t2EzsJj.png')
        //Wait 5 seconds
        alert('Image   https://website.com/TrRRE0v.png')
        //Wait 5 seconds
        alert('Image   https://website.com/vG8BkNG.png')
        //Wait 5 seconds
        alert('Image   https://website.com/uddMAhU.png')
        //Wait 5 seconds and so on...

However, this code runs all the alerts instantaneously and then waits 5 seconds and runs it again.

Also, since all the alerts contain "Image https://website.com/" is there a way to make this code less redundant? Since it is being repeated a lot and just the last .png part is changing?

Any help is appreciated. Thanks,

Upvotes: 0

Views: 47

Answers (3)

banna
banna

Reputation: 249

Create an array that contains image names (note that I put only 2 names, but you should fill the rest):

let images = ["t2EzsJj.png", "TrRRE0v.png"];

Now use setInterval:

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); 
  alert(`Image   https://website.com/${imageName}`)
}, 5000)

Upvotes: 0

RaJesh RiJo
RaJesh RiJo

Reputation: 4400

Put your data in an array and use setInterval() to repeat through array values and use clearInterval() to break the loop. check below snippet for reference.

var cars = ["Saab", "Volvo", "BMW"];
var i = 0;
var repeat = setInterval(function() {
  if (i == cars.length) {
    clearInterval(repeat);
    return;
  }
  myFunction(i);
  i++;
}, 1000);

function myFunction() {
  console.log(cars[i]);
}

Upvotes: 2

poohitan
poohitan

Reputation: 526

Try this:

const INTERVAL_IN_MS = 5000, // 5 seconds
  imageIds = ['t2EzsJj', 'OT115fy', '5N69l7R']; // put all image IDs into this array
    
imageIds.forEach((imageId, index) => {
  setTimeout(() => {
    alert(`Image https://website.com/${imageId}.png`);
  }, index * INTERVAL_IN_MS);
});

Every iteration of this loop will postpone a function call for 5 * index seconds. As indices of array elements are 0, 1, 2..., those functions will run in 0, 5, 10... seconds. Check the setTimeout documentation.

As for me setTimeout is simpler than setInterval in this case, as you won't need to clearInterval() in the end of the array.

To make the code less redundant, you can store an array with only image ids.

Upvotes: 1

Related Questions