How to add a pause during every iteration of a "for loop" using Javascript?

Question

Scenario: I have an array of words and their corresponding meanings which I have to display in intervals in different DIVs. Following is the code I wrote:

<body>
<div id="worsd">
</div>
<div id="meaning"> 
</div>
<script>
var wordss = [["word1","meaning1"],["word2","meaning2"],["word3","meaning3"]];
for(var i =0;i<wordss.length;i++)
{
var hellooo = wordss[i][0];
var hellooo1 = wordss[i][1];
document.getElementById('worsd').innerHTML = hellooo;
document.getElementById('meaning').innerHTML = hellooo1;
}
</script>
</body>

Please help me in achieving it by providing valuable guidance.

Many Thanks !

This might help. Add a setTimout inside your for loop. stackoverflow.com/questions/5226285/… — Josh
– Josh, Commented Sep 22, 2015 at 18:57

GolezTrol · Accepted Answer · 2015-09-22 18:59:07Z

You can't make a delay, but you can set a timer that updates the texts periodically.

I've kept the variables as you named them, but I wrapped the lot in an Immediately-invoked function expression to keep the global scope clean. This is not necessary by the way.

<body>
<div id="worsd">
</div>
<div id="meaning"> 
</div>
<script>
(function() // Wrap in immediately invoked function.
{
  var wordss = [["word1","meaning1"],["word2","meaning2"],["word3","meaning3"]];
  var i = 0;

  // Function that just shows the next word every time it is called.
  function nextWord() {
    var hellooo = wordss[i][0];
    var hellooo1 = wordss[i][1];
    document.getElementById('worsd').innerHTML = hellooo;
    document.getElementById('meaning').innerHTML = hellooo1;
    if (++i >= wordss.length) 
      i = 0; // Wrap when the last element is passed.
  };
  
  // Set a timer to call the function every 2 seconds.
  setInterval(nextWord, 2000);

  // Show the first word right away.
  nextWord();
})();
</script>
</body>

Brant · Accepted Answer · 2015-09-22 18:59:09Z

0

var arrOfWords = [] // words here
function showWords(index) {
    // do your words display stuff here
}

var counter = 0;
var timeOut = setInterval(function(){
    counter++;
    if(counter < arrOfWords.length)
        showWords(counter)
    else
        clearInterval(timeOut)
}, 2000) // ms of loop

showWords(counter) // be sure to handle the first one

answered Sep 22, 2015 at 18:59

Brant

1,78811 silver badges19 bronze badges

Comments

Buzinas · Accepted Answer · 2015-09-22 19:11:48Z

0

You must use a recursive function to do what you want. E.g:

// timer function that loops through an array in a given interval
function timer(list, callback, time /*, onFinish, index*/ ) {
  var onFinish = arguments.length > 3 ? arguments[3] : void 0,
    index = arguments.length > 4 ? arguments[4] : 0;

  if (index < list.length) {
    callback.call(this, index, list[index]);
    list.__timed = setTimeout(function() {
      timer(list, callback, time, onFinish, ++index);
    }, time);
  } else if (onFinish) {
    onFinish.call(this);
  }

  return {
    cancel: function() {
      if (list.__timed !== void 0) {
        clearTimeout(list.__timed);
        delete list.__timed;
      }
    }
  };
}

document.addEventListener('DOMContentLoaded', function() {
  var wordss = [
      ["word1", "meaning1"],
      ["word2", "meaning2"],
      ["word3", "meaning3"]
    ];
  
  timer(wordss, function(index, item) {
    var hellooo = item[0];
    var hellooo1 = item[1];
    
    document.getElementById('worsd').innerHTML = hellooo;
    document.getElementById('meaning').innerHTML = hellooo1;
  }, 3000);
});

<body>
  <div id="worsd">
  </div>
  <div id="meaning">
  </div>
</body>

The timer function above can be called for any array, passing a callback function for what you want, and the time you want to delay between iterations.

edited Sep 22, 2015 at 19:11

answered Sep 22, 2015 at 19:02

Buzinas

11.8k2 gold badges38 silver badges59 bronze badges

5 Comments

GolezTrol Over a year ago

Congratulations, you've just invented setInterval from scratch. :-) This is not actually a recursive function, by the way, since the 'recursive' call is done from the timer handler, and the calling function is already ended by that time.

Buzinas Over a year ago

The problem with setInterval is that it doesn't wait it to finish before starting again. So, if you're doing expensive stuff inside the callback, you won't get the desired result.

GolezTrol Over a year ago

Theoretically that may be true, but if it takes more than 3 seconds to put a text in a div, you're already not getting desired results. :)

Buzinas Over a year ago

@GolezTrol well, it depends on what you want to achieve here ;) - btw, it's pretty easy to change the helper function to immediately call the callback if it's the first item.

Buzinas Over a year ago

@GolezTrol as simply as calling the callback outside the setTimeout, as you can see in my edited answer.

Collectives™ on Stack Overflow

How to add a pause during every iteration of a "for loop" using Javascript?

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related