Most likely, you will want to use a recursive function instead of a for loop here. However, I will explain both ways just in case you (or someone else reading this) set your heart to it with a loop.
For a recursive function, the general idea is that you want to call the function once and then let it call itself repeatedly until it finishes doing what you want. As for the code, it might look something like this:
loopThroughSplittedText: function(splittedText) {
Alternatively, if you really prefer to use a loop, you can still do it, but there is an honest battle that needs to be done for this.
First, you will need to place console.log in your own function. This is because when you place console.log(something) , you do not actually pass it on, but call it right then and there, which you don’t want; Having called him, he directly splashes out the text on the console, but does not wait later. Dropping it in its own function, it can be passed to setTimeout so that it can be called later.
Secondly, you will have to transfer this function to another function in order to ensure its correct value i when it starts. The reason is that it is true: your intention is to tell the function "when you are ready, use what i was when I set you up." However, what you are doing right now effectively says, “When you are ready, look i .” Since the function does not verify that i , until it is ready to run, it will not know its value until you complete the cycle, and the value of i will be much larger than you want!
As part of the subitem above, you should call this function immediately. This is called a direct function call. If you are not familiar with them, they certainly deserve attention. Their use is a little unusual, but they are a powerful tool in the right place.
Finally, since you are setting everything right here and now, you want to make sure that the timeout for each function is divided into the second part; as now, you say, “do all these seconds from now on,” when your intention is “do all these two seconds, starting from one second.” This fix is relatively simple; all you have to do is multiply your timeout by i so that you set the first one to go after 1 second and the second after 2 seconds, etc.
All of this together gives a code that looks something like this:
loopThroughSplittedText: function(splittedText) { for (var i = 0; i < splittedText.length; i++) { setTimeout( (function(locationInString) { return function() { console.log(splittedText[locationInString]); }; }(i)), (1000*i) ); } },
As for a better solution, I would probably recommend a recursive function. The recursive version will only create one function that calls itself for each line you pass, while the loop version for the cycle will create one function for each character in the line, which can quickly get out of hand. Creating a function (and creating an object as a whole) can become expensive in JavaScript when you work on larger projects, so it’s best to use solutions that avoid a huge number of functions when possible.
But still, for the sake of explanation, I would not want to leave you without a for loop version; knowledge may come in handy in other places. :)