Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Stop text-rotator timeout when array ends

My code works fine, but it never ends. How can I stop the rotator after Word6? I have tried one more setTimeout but it’s not working.

const phrases = ['Word1', 'Word2', 'Word3', 'Word4', 'Word5', 'Word6'];
let index = 0;

function rotate() {
  document.getElementById('text-rotator').innerText = phrases[index];
  index = (index + 1) % phrases.length;
  setTimeout(rotate, 700);
}

rotate();
<span id="text-rotator"></span>
Tags:

2

Answers


  1. 0

    To stop the update at the end of the array, increment index within the rotate() function and check that it’s still within the bounds of the array. Only when it is, then you should invoke rotate() again.

    const phrases = ['Word1', 'Word2', 'Word3', 'Word4', 'Word5', 'Word6'];
let index = 0;

function rotate() {
  document.getElementById('text-rotator').innerText = phrases[index];
  if (++index < phrases.length)
    setTimeout(rotate, 700);
}

rotate();
    <span id="text-rotator"></span>
    Login or Signup to reply.
  2. 0

    The loop never ends because of the % will restart

    Here is a "better" way

    const phrases = ['Word1', 'Word2', 'Word3', 'Word4', 'Word5', 'Word6'];
let index = 0, tId, rotator= document.getElementById('text-rotator');

function rotate() {
  rotator.innerText = phrases[index++];
  if (index >= phrases.length) clearInterval(tId);
}
tId = setInterval(rotate,700);
    <span id="text-rotator"></span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search