Crafty.js : having problems with setTimeout

Question

I am using following code with Crafty. 0.5.3 (cause Crafty 0.5.4, crashed my game for unknown reasons, nvm, i'm all right with crafty0.5.3, at least now...) to make my player move by 4px for 8 times (making it whole 32px) but sloooowly, by using timeout, i want to delay by 3 milliseconds each time for loop is ...looped(?) so that i can have 24 milliseconds delay which should set with my animation.

Following is the code i am using, putMessage is function to show some message in message box which i already made, first parameter in this function is message and second is boolean value which tells whether this should be added in message box (msg += value) or should replace the msg (only msg = value)

    moveLeft: function() {
    for (var i = 0; i < 8; i++) {
        setTimeout(function() {
                var d= new Date();
                putMessage(i+1 + "result : " + d.getSeconds() + "." + d.getMilliseconds() + "<br/ >", true);
                this.move('w',4);
                this.borderCheck();
                putMessage(d.getSeconds() + "." + d.getMilliseconds() + "<br>", true);
        }, 3)
    }
  },

Here is the result in message box, pls don't take miliseconds after 1digit in consideration.
9result : 49.493
9result : 49.493
9result : 49.493
9result : 49.509
9result : 49.509
9result : 49.509
9result : 49.509
9result : 49.509

see that '9', why 9 is there, because i guess, there should be values like 1result, 2result, ....8result, .... 9 shouldn't be anywhere..and second putMessage doesn't seems to work....neither player is moved.but if remove setTimeout() like,

moveLeft: function() {
    for (var i = 0; i < 8; i++) {
        var d= new Date();
            putMessage(i+1 + "result : " + d.getSeconds() + "." + d.getMilliseconds() + "<br/ >", true);
            this.move('w',4);
            this.borderCheck();
            putMessage(d.getSeconds() + "." + d.getMilliseconds() + "<br>", true);
    }
  },

the result obtained in message box is,
1result : 36.176
36.176
2result : 36.176
36.176
3result : 36.176
36.176
4result : 36.176
36.176
5result : 36.192
36.192
6result : 36.192
36.192
7result : 36.192
36.192
8result : 36.192
36.192

see? perfect....and more importantly, player moves..!

So what does setTimeout actually does....btw, it is working fine at another place, so is it setting any limit like only first 2 lines of codes are executed or something?

Please HELP, I am yet very new to this language.

Thanks in advance :D

EDIT : I resolved it after adding following line just before for loop

intPlayer = this; //intPlayer = internalPlayer;

and then i changed "this.move" and "this.borderCheck()" with "intPlayer.move" and "intPlayer.borderCheck()" ...and things become great...

Can somebody explain why?

Answer 1

To answer why the context in setTimeout is different:
The setTimeout function saves your callback function into a queue. When the time is right the callback function will be invoked. The problem is that the context of your callback function gets lost - it does not know from which object you called setTimeout, so it can't call the callback function with this set to the aforementioned object.
Taken from MDN's setTimeout documentation page.