setTimeout in a for loop, variable not changing

Question

I'm a bit of a beginner to JavaScript and I've been trying to figure this out for at least two hours. If someone could explain to me why this is happening, it'll be great!

function slowDouble(x, callback) {
    setTimeout(function() {
    callback(2 * x);
  }, 500);
}

function slowDoubleTenTimes(x, callback) {
    for (i = 0; i < 10; i++) {
        slowDouble(x, function(result) {
            x = result;
        });
    }

    callback(x);
}

slowDoubleTenTimes(3, function(result){
  console.log('The result of slowDoubleTenTimes is ' + result);
});

Logic is telling me that in slowDoubleTenTimes , in the for loop, x should be changing. And every time it calls slowDouble again in the subsequent for-loop iteration, x should be different. But x remains at 3 ! In fact, the resulting answer in callback(x) should be 3072 . Yet, x changes from 3 to 6 and then remains at 6 .

Is there something about JavaScript that I don't know that's preventing the result from changing?

Also, the weird thing is, if I put console.log("hi") after the for-loop, the console prints out "hi" before slowDouble runs. Shouldn't slowDouble run before console.log("hi") ? Or is there something about setTimeout that I'm not understanding correctly?

Thank you!

Answer 1

slowDouble does not block. So, "callback" is invoked right away.

setTimeout says, "run this function in 500 milliseconds". But, it doesn't block, which means that it continues to the next lines after it registered to be invoked in 500 ms.

Answer 2

• JavaScript engines only have a single thread, forcing asynchronous events to queue waiting for execution.

• If a timer is blocked from immediately executing it will be delayed
  until the next possible point of execution (which will be longer than the desired delay).

http://ejohn.org/blog/how-javascript-timers-work/

function slowDouble(x, callback) {
    setTimeout(function() {
    callback(2 * x);
  }, 500);
}

function slowDoubleTenTimes(x, callback) {
    for (i = 0; i < 10; i++) {
        slowDouble(x, function(result) {
            x = result;
        });
    }

    callback(x);  //This will get called before the callback from timeout
                  // in slowDouble's context is called. 
                  // console.log(3)

}

slowDoubleTenTimes(3, function(result){
  console.log('The result of slowDoubleTenTimes is ' + result);
});

Answer 3

you are immediately calling slowDoubleTenTimes with the x value of 3 which then invokes slowDouble 10 times and every call passes the value of x as 3 . approximately 500 ms later your callback is invoked to change the value of x and since the other calls to slowDouble have already been invoked, changing the value of x has no effect on those calls.