Scope problems when using setTimeout in backbone.js

Question

I am trying to toggle a state variable in my Backbone collection ("Posts") after a certain period of time (called from a view), and am trying to use setTimeout. However, I think I am screwing up my scope as my toggle function is not working (it is getting called, but it is not changing properly).

If I use

setTimeout(this.model.collection.toggleReadyToPreloadNewPost, 1000);

, the code does not work, while if I use

this.model.collection.toggleReadyToPreloadNewPost();

it toggles it correctly. I was wondering how I can solve this?

Backbone View

//ensures namespace is not already taken yet
wedding.views = wedding.views || {};

//each PostView corresponds to a single post container 
//which contains the user name, user comment, and a photo
wedding.views.PostView = Backbone.View.extend({

  tagName: "li",
  template: "#item-template",
  className: "hideInitially post",

  initialize: function() {
    _.bindAll(this);
    this.template = _.template($(this.template).html());
  },

  render: function() {
    this.preload();
    return this;
  },

  //preloads an image and only after it is done, then append
  preload: function() {
    var image = new Image(); 
    image.src = this.model.get("src");
    this.model.incrementTimesSeen();

    //hides the element initially, waits for it to finish preloading, then slides it down
    //updates lastSeen only after the image is displayed
    image.onload = $.proxy(function() {
      var html = this.template( {model: this.model.toJSON()} );

      this.model.setLastSeen();

      //shows the image by sliding down; once done, remove the hideInitially class
      this.$el.hide().append(html).slideDown();
      this.$el.removeClass("hideInitially");

      setTimeout(this.model.collection.toggleReadyToPreloadNewPost, 1000);
    }, this);
  }

});

Backbone Collection

//check if namespace is already occupied
wedding.collections = wedding.collections || {}; 

wedding.collections.Posts = Backbone.Collection.extend({
  model: wedding.models.Post,

  initialize: function() {
    this.readyToPreloadNewPost = 1;
  },

  //toggles "readyToPreloadNewPost" between 1 and 0 
  toggleReadyToPreloadNewPost: function() {

    this.readyToPreloadNewPost = this.readyToPreloadNewPost ? 0 : 1;
  }    
});

Answer 1

When you do this:

setTimeout(this.model.collection.toggleReadyToPreloadNewPost, 1000);

You're just handing setTimeout the plain unbound toggleReadyToPreloadNewPost function and setTimeout will call it as a simple function. The result is that this will be window inside toggleReadyToPreloadNewPost when setTimeout calls the function.

You can get the right this by wrapping your method call in an anonymous function:

var _this = this;
setTimeout(function() {
    _this.model.collection.toggleReadyToPreloadNewPost();
}, 1000);

You can also use _.bind :

setTimeout(
    _(this.model.collection.toggleReadyToPreloadNewPost).bind(this.model.collection),
    1000
);

You could also use _.bindAll inside the collection's initialize to always bind that method to the appropriate this :

wedding.collections.Posts = Backbone.Collection.extend({
    initialize: function() {
        _.bindAll(this, 'toggleReadyToPreloadNewPost');
        //...
    }

And then your original

setTimeout(this.model.collection.toggleReadyToPreloadNewPost, 1000);

should do the right thing. You'd only want to go this route if you always wanted toggleReadyToPreloadNewPost to be bound, I'd probably go with the first one instead.