Stop javascript from looping

Question

I'm using this script to replace some text on my page.

function initChangeText() {
  var time = 2;
  setInterval('changeText();', time * 1000);
}

function changeText() {
  var divs_ = document.getElementsByTagName("div")
  for (var i = 0; i < divs_.length; i++)
    if (divs_[i].className == "change")
      changeULText(divs_[i]);    
}

function changeULText(obj) {
  var ul = obj.getElementsByTagName("ul")[0];
  var li = obj.getElementsByTagName("li");
  for (var i = 0; i < li.length; i++) {
    if (li[i].className == "show") {
      li[i].className = "";
      li[(i + 1) % li.length].className = "show";
      return;
    }
  }
}
window.onload = initChangeText;

The problem is that this script is looping it self. And i don't want it to. I want it to execute once and then stop.

How do i do that?

sounds like you should be using `setTimeout` instead of `setInterval` — CrayonViolent, Oct 01 '16 at 15:04
You should avoid passing a `string` value to `setTimeout` or `setInterval` function, like explained [http://stackoverflow.com/a/5801700/6832715](http://stackoverflow.com/a/5801700/6832715) — Diego Cardoso, Oct 01 '16 at 15:09

score 3 · Answer 1 · edited Oct 01 '16 at 15:08

3

This:

function initChangeText() {
  var time = 2;
  setInterval('changeText();', time * 1000);
}

calls the script every second. Remove that function and change window.onload = initChangeText; to window.onload = changeText;

edited Oct 01 '16 at 15:08

Anik Islam Abhi

25,137
8
58
80

answered Oct 01 '16 at 15:05

j08691

204,283
31
260
272

score 1 · Answer 2 · answered Oct 01 '16 at 16:37

As Crayon Violent says in a comment, you should use setTimeout instead of setInterval.

From Mozilla Developer Network:

setTimeout:

Sets a timer which executes a function or specified piece of code once after the timer expires.
setInterval:

Repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. Returns an intervalID.

You could also clear the setInterval after a period of time, or after a number of loops using a counter.

After a period of time
Let's say you want to execute the loop for 3000 ms. Then you could do:

function initChangeText() {
  var time = 2;
  // Store the id to be able to clear it
  var intervalId = setInterval('changeText();', time * 1000);
  // Clear the interval 3000 ms after the interval started
  setTimeout(function() {window.clearInterval(intervalId);}, time * 1000 + 3000);
}

function changeText() {
  // remains the same
}

function changeULText(obj) {
  // remains the same
}
window.onload = initChangeText;

After a number of loops
Let's say you want to execute your loop exactly 6 times. You could do:

var loopCount = 0; // Initialize a global counter
var intervalId;  //  Store the ID in the global scope
function initChangeText() {
  var time = 2;
  intervalId = setInterval('changeText();', time * 1000); // Stores the ID
}

function changeText() {
  // Add an if statement to clear the intervalId when
  // the loopCount reaches the limit of 6 repetitions
  if(++loopCount >= 6 && intervalId) {
    window.clearInterval(intervalId);
  }
  // rest of the function remains the same   
}

function changeULText(obj) {
  // remains the same
}
window.onload = initChangeText;

score 0 · Answer 3 · answered Oct 01 '16 at 15:05

0

window.onload = changeText;
or, if you want to keep the initial timeout: replace setInterval with setTimeout.

answered Oct 01 '16 at 15:05

George Kagan

5,913
8
46
50

Stop javascript from looping

3 Answers3