在每个循环（JS）之间以任意时间循环遍历字符串数组

Question

I want to create an animation of strings being looped over and over again one character at a time. I have two arrays in my string:

 let stringArray = ['TestOne', 'TestTwo']; 

I want to loop over said array repeatedly (string one -> string two -> back to string one -> string two -> ... continuously). I want to print the characters of string one one character at a time. After print all its characters, I will clear the printed string and proceed with the character of string two. Illustration:

T
Te (250 ms after the first char)
Tes (250 ms after the second char)
Test (All characters are printed 250ms after the previous char)
TestO
TestOn
TestOne
T
Te
Tes
Test
TestT
TestTw
TestTwo
... (continue with TestOne again)

The problem is, I want each character to be printed only 250ms after a previously printed character. How can I achieve this?

Answer 1

You could take an array with the indices and an interval for the display.

The array indices contaisn two values at start, [0, 0] which means the first item of stringArray and from this string the first character.

For every loopm, the caracter index gets an increment and this value is checked against the lenght of the string. If greater, then the index of the string gets an increment and the string index is resetted to zero.

To prevent the string index is greater than the actual count of strings, the value is resetted by taking a remainder assignment.

The pattern

(indices => () => {
    // ...
})([0, 0])

is an IIFE ( immediately-invoked function expression ), which takes the array as value for the first parameter. It is a closure over the array and allows to use the resturnd function as callback for the interval.

Tha advantage is to have a data set which is not changable from the outside and is avilable for any call of the callback.

 let stringArray = ['TestOne', 'TestTwo']; setInterval((indices => () => { document.getElementById('out').innerHTML = stringArray[indices[0]].slice(0, indices[1]); indices[1]++; if (indices[1] > stringArray[indices[0]].length) { indices[0]++; indices[1] = 0; } indices[0] %= stringArray.length; })([0, 0]), 250) 

 <pre id="out"></pre> 

Answer 2

Well, as long as people are posting solutions, I'll post the obvious, simple one, see comments:

 { // A scoping block so the variables aren't globals // (unnecessary if you're using modules) let stringArray = ['TestOne', 'TestTwo']; let arrayIndex = 0; let stringIndex = 1; // Start a timer that will call the callback every 250ms (or so) setInterval(() => { // Get the relevant string const str = stringArray[arrayIndex]; // Output the substring console.log(str.substring(0, stringIndex)); // Move to the next character ++stringIndex; // Need to move to next string? if (stringIndex > str.length) { // Yes, go back to the beginning of the string and // move to the next entry in the array, wrapping // around if we reach the end stringIndex = 1; arrayIndex = (arrayIndex + 1) % stringArray.length; } }, 250); } 

This part:

arrayIndex = (arrayIndex + 1) % stringArray.length;

is a handy trick for when you have an index (0...n-1) and want to increment it and loop around. Say you have 3 entries, so the indexes are 0, 1, and 2. When you're at 2, (2 + 1) is 3 and 3 % 3 is 0 , so it wraps around.

Answer 3

One way you could do this is without using a loop, but instead using a function which takes some parameters so you know how far or long you are in a word, and which word you are currently printing in your array.

Once you are printing with a function, simply add a setTimeout() in the function and then you can control the delay. See https://www.w3schools.com/jsref/met_win_settimeout.asp for more info on timeouts in javascript.

Answer 4

 strings = []; for (var i = 1; i <= "TestOne".length; i++) strings.push ("TestOne".substring (0, i)); for (var i = 1; i <= "TestTwo".length; i++) strings.push ("TestTwo".substring (0, i)); var position = 0; setInterval (() => { console.log (strings [position++]); if (position == strings.length) position = 0; }, 250);