CODEWITHSUNDEEP
javascriptfor-loop
Mo Pishdar
Mo Pishdar

Reputation: 123

How to use a time interval for each iteration of a for loop?

I want to show each word of a string of text in 60 seconds intervals on screen and came up with something like this:

let text = "Aliquam bibendum nulla et ligula vehicula semper. Nulla id posuere lorem, ac dignissim nunc. Quisque leo lorem, fringilla non ante ac, lobortis auctor leo. Fusce sit amet nibh vitae augue convallis iaculis eget ac erat.";

let mainId = document.getElementById("main");

function showWords() {
  // Print words to the screen one at a time.

  let textArray = text.split(" ");
  for(let i = 0; i < poemArray.length; i++) {
    mainId.textContent = poemArray[i];
  }  
}

I know that I should use a setInterval() method here, I'm not just sure how I should use it. I have tried to put the whole for loop as the function part of it and even tried to put the code inside the for loop as the function part and nothing works.

Upvotes: 0

Views: 1837

Answers (5)

Josh Ray
Josh Ray

Reputation: 301

You can use async/await to trigger a configurable delay:

const delay = ms => new Promise(res => setTimeout(res, ms));

function updateText = async () => {
  var current = 0;
  var count = textArray.length;
  while (current < count) {
    mainId.textContent = poemArray[i];
    current++;
    await delay(60000);
  }
};

Upvotes: 0

kmoser
kmoser

Reputation: 9273

You have a few errors in your code. First, there is no poemArray, only 'textArray`. In any case, here's my algorithm:

let text = "Aliquam bibendum nulla et ligula vehicula semper. Nulla id posuere lorem, ac dignissim nunc. Quisque leo lorem, fringilla non ante ac, lobortis auctor leo. Fusce sit amet nibh vitae augue convallis iaculis eget ac erat.";

let mainId = document.getElementById("main");
let poemArray = text.split(" "); // Array of words

function showWords() {
  if ( poemArray.length ) { // If there are more words to show
    mainId.textContent += (poemArray.shift() + " "); // Remove the first word and show it
    setInterval( showWords, 1000 ); // Show the next word in 1 second
  }  
}
showWords() // Kick off the process by showing the first word

Upvotes: 0

Alexandr Maliovaniy
Alexandr Maliovaniy

Reputation: 137

let mainId = document.getElementById("main");
let timeDelay = 1000; // in ms
let text = "Hello world this is example text";

function showWords() {
  let textArray = text.split(" ");

  function Show(item) {
    if (item < textArray.length) {
      mainId.innerText = textArray[item];
      setTimeout(Show, timeDelay, item + 1);
    }
  }
  Show(0);
}

showWords();
<div id="main"></div>

Upvotes: 0

Jacob
Jacob

Reputation: 155

Start an interval, and set the id to a variable so you can clear it out later.

Remove the first element of the array with .shifit() and do something with it. When the array has a length of 0, clear the interval. 

let intervalId = setInterval(() => {
    if (textArray.length>0) {
        console.log(textArray.shift());
    } else {
        clearInterval(intervalId);
    }
}, 60000);

Upvotes: 0

epascarello
epascarello

Reputation: 207511

Basic queue with shift and setInterval()

let text = "Aliquam bibendum nulla et ligula vehicula semper. Nulla id posuere lorem, ac dignissim nunc. Quisque leo lorem, fringilla non ante ac, lobortis auctor leo. Fusce sit amet nibh vitae augue convallis iaculis eget ac erat.";

let mainId = document.getElementById("main");

function showWords() {
  let textArray = text.split(" ");
  function next() {
    // grab first index off array and display it
    mainId.innerText = textArray.shift()
    // if we still have items, create timeout to get next
    if (textArray.length) {
      setTimeout(next, 1000)
    }
  }
  next()
}

showWords()
<div id="main"></div>

Upvotes: 1

Related Questions