So my problem is with the timeout, because by the time it starts my array is reset and also all the other values are changed as well.

i have user input in the messages array, which are the lines they entered. for example:

messages = ["first line", "second", "third", "etc.."];

for(var i=0; i < messages.length; i++){
    setTimeout(function () {
        draw(messages[i], x, y+(i*k*f) );
    }, i*20*messages[i].length);
}
message = "";
messages = [];

k and f are constant values 3 and 2 respectively, but they can be changed by the user to whatever float value. x and y are some coordinates.

So once the draw() function is called the values are undefined or wrong.

I've searched some answers, but none were similar enough for me to figure out what I need to do for my particular case.

So my problem is with the timeout, because by the time it starts my array is reset and also all the other values are changed as well.

i have user input in the messages array, which are the lines they entered. for example:

messages = ["first line", "second", "third", "etc.."];

for(var i=0; i < messages.length; i++){
    setTimeout(function () {
        draw(messages[i], x, y+(i*k*f) );
    }, i*20*messages[i].length);
}
message = "";
messages = [];

k and f are constant values 3 and 2 respectively, but they can be changed by the user to whatever float value. x and y are some coordinates.

So once the draw() function is called the values are undefined or wrong.

I've searched some answers, but none were similar enough for me to figure out what I need to do for my particular case.

• javascript
• settimeout

• 1 Don’t reset your messages array until your timeout call runs. That is, reset it in the timed out function. – mccambridge Commented Jun 21, 2018 at 3:05

5 Answers 5

Your for loop executes 4 times based on the example messages length. However by the time the first setTimeout ends and the anonymous function inside of it fires, the messages array is already empty by the lines of code that follow at the end.

In that last line of code, you are re-initializing the messages array to the empty array and by the time the asynchronous setTimeout callbacks occur, they are trying to access indices 0,1,2,3 which no longer exist, thus undefined values are the result.

messages = []; // an empty array with zero length

To help clarify what's happening, consider this:

// this is what you might expect
var arr = [ "foo", "bar", "baz"];
console.log(arr[0]); // logs "foo" to the console

// this is actually what's happening
var arr = []; // set arr equal to a new empty array
console.log(arr[0]); // logs "undefined" to the console

I’ve only explained the what and why. @brk provides a couple of code solutions in his answer.

In Javascript setTimeout function is asynchronous. so your following code

messages = [];

it gets executed before the actual timeout callback function gets called and you see the error because the messages variable is empty when the actual callback function is called.

try to learn more about asynchronous Javascript, you will understand better.

Create a closure and an immediately invoking function expression and pass the variable to access it inside the settimeout callback function

let messages = ["first line", "second", "third", "etc.."];

for (var i = 0; i < messages.length; i++) {
  //Creating an IIFE
  (function(x, msg) {
    //typical closure, passing x & message to the settimeout
    setTimeout(function() {
      draw(msg[x]);
    }, x * 20 * msg[x].length);
  }(i, messages)) // passing reference of both i, & messages
}
messages = "";
messages = [];

function draw(x, y, z) {
  console.log(x)
}

An alternate to this usage of let keyword. Variable declared with let keyword always have scope in current block

let messages = ["first line", "second", "third", "etc.."];

for (let i = 0; i < messages.length; i++) {
  let _i = i,
    _ms = messages
  setTimeout(function() {
    draw(_ms[_i]);
  }, _i * 20 * _ms[_i].length);
}
messages = "";
messages = [];

function draw(x, y, z) {
  console.log(x)
}

You are trying to run you logic inside setTimeout and variable i is function level. That means you timeout function will execute after for loop and all sync method finish. In your case your timeout function will execute after messages=[] last line and value of i will be messages.length which is 4 while loop executing.

To prevent this issue use self closure function. Self closure will take parameters as sync and will store variable function level which will not change.

Here's a example how to use self closure.

messages = ["first line", "second", "third", "etc.."];

for(var i=0; i < messages.length; i++){
    (function(i, message) {
       setTimeout(function () {
          draw(message, x, y+(i*k*f) );
       }, i*20*message.length);
    })(i, messages[i])
}
message = "";
messages = [];

In this example we are avoiding use of variable of foor loop function and we are creating new function inside loop and passing parameters.

You have to save the current value.

The main problem is variable's scope and shared variable be overrided.

messages = ["first line", "second", "third", "etc.."];

// your variable
var x = 1;
var y = 1;
var k = 2;
var f = 3;

for(var i=0; i < messages.length; i++){
  set(messages[i]);
}
message = "";
messages = [];

// set a function scope to save current value
function set(val){
  setTimeout(function () {
      draw(val, x, y+(i*k*f) );
  }, i*20*val.length);
}

// your draw function
function draw(a, b, c){
  console.log(a);
}