How to use external initializer in for loop and setTimeout?

Question

Please look at
https://stackblitz.com/edit/typescript-7hch6s

function main(): void {
  let loopIndex: number = 2;
  let actions: string[] = ["dance", "walk", "run", "sit", "kick"];
  for (; loopIndex < 5; loopIndex++) {
    doAction(actions[loopIndex]);
    window.setTimeout(() => doAction(actions[loopIndex]), 1000);
  }
}
function doAction(action: string) {
  console.log("action is " + action);
}
main();
/////////
The output in the console is
action is run
action is sit
action is kick
action is undefined
action is undefined
action is undefined

I get the three undefineds where I want the values of run sit kick to print in the last three lines in the console. Is this a scope problem? I tried the bind method. But, I couldn't find a solution.

Answer 1

The problem is that by the time the first doAction inside of setTimeout is called loopIndex is already equal to 5 and actions[5] is unknown.

The simplest method to solve this would be moving the variable initialization into the for loop. This works because of the let keywords scoping rules:

for (let loopIndex: number = 2; loopIndex < 5; loopIndex++) {
    doAction(actions[loopIndex]);
    window.setTimeout(() => doAction(actions[loopIndex]), 1000);
}

or you could use a closure:

function main(): void {
  let loopIndex: number = 2;
  let actions: string[] = ["dance", "walk", "run", "sit", "kick"];
  for (; loopIndex < 5; loopIndex++) {
    doAction(actions[loopIndex]);
    delayDoAction(actions[loopIndex]);
  }
}

function delayDoAction(action: string) {
  window.setTimeout(() => {
    doAction(action)
  }, 1000);
}

function doAction(action: string) {
  console.log("action is " + action);
}
main();

or finding some other way of incrementing the index inside of the doAction function.