'function invoked for each element in array, in time intervals

Trying to write a function, that does work for one element in the array - and after time, repeats the same work for the next element (for each element in the array). Array consists of <span> elements.

Current function does work for all the elements in the same time.

const wordIntroGroup = document.getElementsByClassName("word");
const forwardBut = document.getElementById("forward");

forwardBut.addEventListener("click", forward);


function forward() {

  const y = wordIntroGroup;

  for (let i = 0; i < y.length; i++) {
    setTimeout(function() {
      console.log(y[i]);
    }, 2000)
  }
}
<p>
  <span class="word">Naw,</span>
  <span class="word">while</span>
  <span class="word">you're</span>
  <span class="word">here</span>
</p>

<span id="forward" class="material-icons">
  fast_forward
</span>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source