7

I want to invoke the window.setTimeot function with my custom scope so I use the call method, but there is something wrong.

function foo() {
    this.bar = function() {
        console.log("keep going");
        window.setTimeout.call(this,this.bar,100);
    }
    this.bar();
}

new foo;

under Firefox this prints to the console only 1 line and then nothing, and under google chrome it throws a TypeError.

What is the problem in my code?

Gergely Fehérvári
  • 7,811
  • 6
  • 47
  • 74

1 Answers1

8

Using call does not help here: it calls setTimeout with your this object, but the callback function itself is still called from the global scope. What you really want to do is something like this:

function foo() {
    var self = this;
    this.bar = function() {
        console.log("keep going");
        window.setTimeout(function() { self.bar(); }, 100);
    }
    this.bar();
}

Edit: If you really want something similar to the call approach, you can use bind which binds the this value for a function:

window.setTimeout(this.bar.bind(this), 100);

However, this is part of the new ECMAScript 5 spec which is not yet supported by all browsers.

casablanca
  • 69,683
  • 7
  • 133
  • 150
  • thanks, i know that this way works, i am trying to use the `call`. – Gergely Fehérvári May 24 '11 at 14:55
  • 1
    @omnosis: You cannot use `call` for this purpose. What you're looking for is [`bind`](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind), which is part of the new ECMAScript 5 spec. Using that, you can do something like this: `window.setTimeout(this.bar.bind(this), 100)`. – casablanca May 24 '11 at 14:57
  • makes perfect sense. I made the same mistake, makes no sense to use `call` on `setTimeout` because you're not trying to change the `this` of `setTimeout`, but rather, the function you are passing as an argument. cheers – chiliNUT Jul 29 '15 at 22:28