How to pass variables when using JS setTimeout()

Question

I am using clippy.js to make the characters in the viewport speak through a ballon. I would like to have the characters speak texts in a sequence by passing elements in an array that contains the different texts with a delay in between speaking the texts. For this I am using a for loop with a specific delay the between passings of the text. That part works well using setTimeout(), but, likely because of the asynchronous nature of JS, only the last text variable is passed to the function. Here is the code snippet:

for (n=0;n<4;++n){
    x = tmptext[n];
    setTimeout(() => {agent.speak(x);}, 5000 + n*5000);
}

tmptext[] is an array that contains the different texts, and cagent.speak() is the function for making the character speak a text, which otherwise works well. The problem is that the character only speaks the last text in the array 4 times although it does so with the proper timing between them. Clearly, the function is executed 4 times using only the value of the variable x as assigned to it in the last iteration in the for loop (which is the value of x=tmptext[3] in this case).

If I use the tmptext[] array directly, I get no text at all passed from this array into the function. For instance,

for (n=0;n<4;++n){  
    setTimeout(() => {agent.speak(tmptext[n]);}, 5000 + n*5000);
}

Here, no text is passed as confirmed by using alert in the cagent.speak() function to monitor this, and indeed the balloon appears empty 4 times. This is because the value of n that is being used is of its last value in for iteration which makes it 5 and beyond the scope of the array.

The asynchronous nature of JS seems to be the problem here and I am not familiar in dealing with it. How do I pass the value of each element in the array into the function with the proper timing in between? Would appreciate help here.

Does this answer your question? [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Ruan Mendes, Oct 05 '21 at 18:28
By the time your `setTimeout` handler runs, the value of `n` will be 5. See https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example Easiest solution would be to use `let` which creates separate variables for each iteration of the loop. That is, the same variable is shared in a closure when using `var`. — Ruan Mendes, Oct 05 '21 at 18:30
Thank you Juan. Indeed, defining x in each iteration with "let" solved the problem. — krasnit, Oct 05 '21 at 18:57

score 0 · Answer 1 · answered Oct 05 '21 at 19:02

0

This code solved the problem:

for (n=0;n<4;++n){
    let x = tmptext[n];
    setTimeout(() => {agent.speak(x);}, 5000 + n*5000);
}

answered Oct 05 '21 at 19:02

krasnit

1
1

Should be `for (let n=0;n<4;n++){` – Ruan Mendes Oct 05 '21 at 20:18

How to pass variables when using JS setTimeout()

1 Answers1