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 !

http://stackoverflow.com/questions/758688/sleep-in-javascript-delay-between-actions — BenG, Sep 22 '15 at 18:57
This might help. Add a setTimout inside your for loop. http://stackoverflow.com/questions/5226285/settimeout-in-for-loop-does-not-print-consecutive-values — Josh, Sep 22 '15 at 18:57

score 2 · Accepted Answer · answered Sep 22 '15 at 18:59

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>

score 0 · Answer 2 · answered Sep 22 '15 at 18:59

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

Buzinas · Answer 3 · 2015-09-22T19:11:48.120

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 '15 at 19:11

answered Sep 22 '15 at 19:02

Buzinas

11,597
2
36
58

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. – GolezTrol Sep 22 '15 at 19:05
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. – Buzinas Sep 22 '15 at 19:06
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. :) – GolezTrol Sep 22 '15 at 19:07
@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 Sep 22 '15 at 19:09
@GolezTrol as simply as calling the `callback` outside the `setTimeout`, as you can see in my edited answer. – Buzinas Sep 22 '15 at 19:12

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

3 Answers3