Question

why is this returning undefined for all ID’s?

var time = 200;

$('.block').each(function () { 
    setTimeout(function () {
        console.log($(this).attr('id'));
        }, time);

    time += 200;
});

but this returns the ID’s just fine?

var time = 200;

$('.block').each(function () { 
    console.log($(this).attr('id'));

    setTimeout(function () {
        }, time);

    time += 200;
});

I’m trying to create a sort of bubbling in one at a time effect and this is driving me crazy

Answer 1

The value of this inside the callback (the global object) is not the same as in the outer scope (where it’s the current element). Use the following to close over a reference to the correct value:

$('.block').each(function () { 
    var that = $(this);
    setTimeout(function () {
        console.log(that.attr('id'));
    }, time);
    time += 200;
});

This works because the function passed to setTimeout is a closure that retains access to the variables declared in its lexical scope (which includes that).

The general lesson here is that the value of this inside a function is determined dynamically and depends entirely on how the function was executed:

• jQuery executes the outer function and explicitly sets this to the current element (using call/apply).

• The browser executes the inner function in a global context, which is why the value of this is window there. This simple test demonstrates that last point:

  setTimeout(function() {
      alert(this === window); // true
  }, 1000)
  

In modern browsers, an alternative to the solution above is to use bind:

$('.block').each(function () { 
    setTimeout(function () {
        console.log($(this).attr('id'));
    }.bind(this), time);
    time += 200;
});