Display Array Elements in forEach loop with delay

Question

For a client, I need to use a typewriter effect to display four different lines of text from an array

I have my typewriter effect setup well, but I'm at a loss on why my forEach loop only displays the last element from my array

var i = 0;
var text;
var txt = [
  'Lorem ipsum dummy text blabla.',
  'Lorem IPSUM dummy text blabla.',
  'Lorem ipsum DUMMY text blabla.',
  'Lorem ipsum dummy TEXT blabla.'
];
var speed = 50;
var delay = 3000
var demo = document.getElementById("demo");

function go() {
  txt.forEach(function(str, index) {
    text = str; // var to pass to typeWriter
    setTimeout(typeWriter(), delay * index);
  });
}

function typeWriter() {
  if (i < text.length) {
    demo.innerHTML += text.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  } else {
    // When string is fully typed, delete after 2 second
    setTimeout(function() {
      demo.innerHTML = '';
      i = 0;
    }, 2000);
  }
}

<button onclick="go()">Click me</button>

<p id="demo"></p>

Answer 1

Just thought it makes a nice question to illustrate async iteration, a brand-new ES2018 feature:

async function delay(value, time) {
    return new Promise(resolve => setTimeout(() => resolve(value), time));
}

async function *eachDelayed(values, time) {
    for (let value of values)
        yield await delay(value, time);
}

async function print(xs) {
    for await (let x of eachDelayed(xs, 50))
        document.body.innerHTML += x;
}

print('The quick brown fox jumps over the lazy dog!')

You need the latest Chrome/FF to run this.

Answer 2

Here is a solution that combines Promises with a setTimeout offset controller.

const speed = 50;
const delay = 2000;
      
const demo = document.getElementById("demo");

function go() {
	
  const textArray = [
    'Lorem ipsum dummy text blabla.',
    'Lorem IPSUM dummy text blabla.',
    'Lorem ipsum DUMMY text blabla.',
    'Lorem ipsum dummy TEXT blabla.'
  ];
	
  let linesToType = initializePromises(textArray)
	
  linesToType.reduce((promiseChain, currentLine) => {
    return promiseChain.then(currentLine);
  }, Promise.resolve())
  
}

var offsetController = (function() {
  let _offset = 0;
  return {
    increaseOffset(time) {
      _offset = _offset + time
    },
    getOffset(){
      return _offset;
    }
  }
})()

function initializePromises(textArray) {
  return textArray.map(line => typeWriter(line) )
}
	
function typeWriter(text) {
  offsetController.increaseOffset(delay);
  return new Promise((resolve, reject) => {
    let promises = text.split("").map((letter, index) => {
	  return printNextLetter(demo, text, index)
    })
    clearLine(demo);
    Promise.all(promises).then(() => { 
      resolve() 
    })
  })
}

function printNextLetter(element, text, i) {
  offsetController.increaseOffset(speed);
  return new Promise((resolve) => setTimeout(() => {
    element.innerHTML += text.charAt(i);
    resolve()
  }, offsetController.getOffset()));
}

function clearLine(element) {
  offsetController.increaseOffset(delay);
  return new Promise((resolve) => setTimeout(() => {
    element.innerHTML = "";
    resolve()
  }, offsetController.getOffset()));
}

<button onclick="go()">Click me</button>

<p id="demo"></p>

Answer 3

forEach is not delayed. When typeWriter is executed, it will see text = 'Lorem ipsum dummy TEXT blabla.'

My not so optimized recommendation:

var txt = [
  'Lorem ipsum dummy text blabla.',
  'Lorem IPSUM dummy text blabla.',
  'Lorem ipsum DUMMY text blabla.',
  'Lorem ipsum dummy TEXT blabla.'
];

function go(){
  demo.innerHTML = '';
  txt.length && doType();
}

function doType(){

  if(!txt[0].length){ 
    txt.shift(); 
    demo.innerHTML += '<br />';
    return setTimeout( doType, 50 );
  }

  if(!txt.length) return;

  demo.innerHTML += txt[0][0];
  txt[0] = txt[0].substr(1);

  setTimeout( doType, 50 );
}

I believe you can do the necessary modification.

Answer 4

You need to pass callback functions to loop over your array's items

Look at this code snippet

var i = 0;
var text;
var txt = [
  'Lorem ipsum dummy text blabla.',
  'Lorem IPSUM dummy text blabla.',
  'Lorem ipsum DUMMY text blabla.',
  'Lorem ipsum dummy TEXT blabla.'
];
var speed = 50;
var delay = 1000
var demo = document.getElementById("demo");

function go() {
  function loop(index) {
    if (index === txt.length) return;
       
    setTimeout(function() {
      text = txt[index];    
      typeWriter(function() {
        loop(++index);
      });      
    }, delay * index);
  }

  loop(0);
}

function typeWriter(cb) {
  if (i < text.length) {
    demo.innerHTML += text.charAt(i);
    i++;
    setTimeout(function() {
      typeWriter(cb);
    }, speed);
  } else {
    // When string is fully typed, delete after 2 second
    setTimeout(function() {
      demo.innerHTML += '<p>';
      i = 0;
      cb();
    }, 2000);
  }
}

<button onclick="go()">Click me</button>

<p id="demo"></p>

See? now is looping correctly.

Answer 5

Your line to update the UI is:

demo.innerHTML = '';

But needs to be:

demo.innerHTML += '<br>';

So that you don't overwrite the previous output and you place the new output on a new line.

Also, you are actually invoking the typewriter function immediately because your setTimeout looks like this:

setTimeout(typeWriter(), delay * index);

Instead of just referencing the function, like this:

setTimeout(typeWriter, delay * index);

var i = 0;
var text;
var txt = [
  'Lorem ipsum dummy text blabla.',
  'Lorem IPSUM dummy text blabla.',
  'Lorem ipsum DUMMY text blabla.',
  'Lorem ipsum dummy TEXT blabla.'
];
var speed = 50;
var delay = 3000
var demo = document.getElementById("demo");

function go() {
  txt.forEach(function(str, index) {
    text = str; // var to pass to typeWriter
    setTimeout(typeWriter, delay * index);
  });
}

function typeWriter() {
  if (i < text.length) {
    demo.innerHTML += text.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  } else {
    // When string is fully typed, delete after 2 second
    setTimeout(function() {
      demo.innerHTML += '<br>';
      i = 0;
    }, 2000);
  }
}

<button onclick="go()">Click me</button>

<p id="demo"></p>