let wordsArray = ["Goodbye", "Universe", "Where", "Are", "We", "Going"];

function iterateThroughWordsArray(wordsArray) {
    for (let i = 0; i < wordsArray.length; i++) {
        // console.log a word during each iteration
        // and add a pause after it
        (function (i) {
            setTimeout(function () {
                document.getElementById('text').innerHTML += wordsArray[i];
                console.log(wordsArray[i]);
            }, 1000 * i);
        })(i);
    };
}
iterateThroughWordsArray(wordsArray);

Fiddle Demo

If you're considering whether to use a recursive function or a for loop in this scenario, I recommend the former. However, I'll provide explanations for both options just in case you or someone else prefers a loop.

For a recursive function, the concept is to call the function once and let it call itself until it completes the desired task. The code may look something like this:

loopThroughSplittedText: function(splittedText) {

  var locationInString = 0;

  function delayedOutput() {

    console.log(splittedText[locationInString]);

    locationInString++;

    if (locationInString < splittedText.length) {
      setTimeout(delayedOutput, 1000);
    }
  }

  delayedOutput(); 
},

Alternatively, if you opt for a loop, some adjustments are necessary to make it work successfully. First, you need to encapsulate console.log within its own function to delay the output. Second, further nesting of functions is required to ensure the correct value of i when each function executes.

You also want to immediately invoke the function expression. Lastly, adjust the timeout values to space out the execution by one second intervals.

The modified code using a for loop could be as follows:

loopThroughSplittedText: function(splittedText) {

  for (var i = 0; i < splittedText.length; i++) {
    setTimeout(
      (function(locationInString) {
        return function() {
          console.log(splittedText[locationInString]);
        };
      }(i)),
      (1000*i)
    );
  }

},

While the recursive solution is generally more efficient as it creates fewer functions, understanding the for loop approach can be beneficial for certain situations. Efficiency-wise, avoiding excessive function creation is crucial in JavaScript projects.

Both methods have their merits, so it's useful to be familiar with different techniques depending on the context. :)

One way to achieve this is by using a recursive function:

var nums = [
    1,2,3,4,5,6,7,8,9,10
    ];

function printNumber(i){
    console.log(nums[i]);
    if (i<nums.length){
       setTimeout(function(){
           i++;
           printNumber(i);
       },1000);
    }
}

printNumber(0);

Visit this link for a demo

Alright, since this isn't an exact duplicate, you'll have to increase the delay in the loop and also address the closure variable issue within the loop. Check out this link for more information.

loopThroughSplittedText: function (splittedText) {
    splittedText.forEach(function (text, i) {
        setTimeout(function () {
            console.log(text);
        }, i * 1000)
    })
}

var obj = {
  loopThroughSplittedText: function(splittedText) {
    splittedText.forEach(function(text, i) {
      setTimeout(function() {
        document.getElementById('x').innerHTML += text
      }, i * 1000)
    })
  }
}

obj.loopThroughSplittedText('abcde'.split(''))

<div id="x"></div>

One issue with the provided code is that the variable i is shared among all the callbacks. This means that when the first callback is instructed to "output the entry at index i", the loop has already completed, causing i to point to the end of the text.

An alternative approach to achieving the desired outcome is to forgo using a traditional for loop. Instead, consider implementing a function that (1) displays a character, (2) updates the counter/position, and (3) schedules the next character if necessary:

loopThroughSplitText: function (text) {
    var i = 0;
    function printEntry() {
        console.log(text[i]);
        i++; // Move to the next position
        if (i < text.length) { // If there are more characters, set up the next one
            setTimeout(printEntry, 1000);
        }
    }
    printEntry(); // Display the initial character
}

Implementing solution with closure concept https://example.com/ClosureSolution

function iterateOverWords(wordsArray) {
    var wordsArray = ["Good", "Morning", "Everyone"];
    for (var j = 0; j < wordsArray.length; j++) {
        // Display each word and pause after it
        (function(_j) {
            setTimeout(function() {
                document.getElementById('word').innerHTML = wordsArray[_j];
                console.log(wordsArray[_j]);
            }, 1000)
        }(j));
    }
}

iterateOverWords()

Here's another approach using a setInterval:

let counter = 0;
const interval = setInterval(() => {
    if (counter >= words.length) {
        clearInterval(interval);
    } else {
        console.log(words[counter]);
        counter++;
    }
}, 1000);

Here are a couple of issues that need to be addressed

1. setTimeout should receive a function as an argument, not the outcome of calling a function
2. setTimeout starts immediately, causing all actions in the loop to run simultaneously and wait 1000ms before executing (despite any comments indicating otherwise, resulting in simultaneous execution).
3. The value of i will always be equal to splittedText.length for each iteration because the loop control variable is not enclosed within a closure.

To solve this, you need to ensure that the setTimeout instructions are completed before proceeding to the next iteration of the loop.

Here's an improved version:

var splittedText = ["Hello", "World", "How", "Are", "You", "Today"];

function loopThroughSplittedText(splittedText) {
    displayValue(splittedText,0);
}

function displayValue(arr, i){
    if(i<arr.length){
        setTimeout(function(){
            document.getElementById('text').innerHTML = arr[i];
            console.log(arr[i])
            displayValue(arr,i+1);
        },1000)
    }
}

loopThroughSplittedText(splittedText)

Check out the live example here: http://jsfiddle.net/d3whkjww/1/

This method can be effective too

 function iterateOverSeparatedText(separatedText) {

        for (var x=0; x < separatedText.length;x++) {
            (function(index, phrase) {
                setTimeout(function(){console.log(phrase);}, 1000 + (1000 * index));
        })(x, separatedText[x]);
    }

 }

Here is a different example:

const colors = ['red', 'green', 'blue'];

const displayColors = function() {
  console.log(colors[0]);
  colors.shift();

  if (colors.length > 0) {
    setTimeout(function() {
      displayColors();
    }, 500);
  }
}

displayColors();

Introducing a different approach to solving the issue by utilizing the third argument in setTimeout, a feature that is specifically designed for modern browsers only:

(function (splittedText) {
   for (var i = 0; i < splittedText.length; i++) {
      setTimeout(
         function(val) { console.log(val); },
         i * 1000,
         splittedText[i]
      );
   }
})(["Greetings", "planet", "!"]);

To learn more about this functionality, check out the official API documentation (including details on optional parameters).

To accomplish this, there are 3 different methods you can use:

1. Utilizing closure
2. Using recursion
3. Declaring variables using let keyword

var info = ['apple', 'banana', 'cherry', 'date'];

Closure Approach:

for(i=0; i<=info.length; i++) {
  (function(item) {
    setTimeout(() => {
       console.log(item);
    }, 1000)
  })(info[i]);
 }

Using the let Keyword for Variable Declaration:

for(const index of info) {
 let localItem = index;
 setTimeout(() => {
    console.log(localItem);
 }, 1000)
}