title: Scope issue within Backbone model.fetch() callback (calling setTimeout)
body: <p>I've a master view (<em>Services</em>) with a collection of child views (<em>Service</em>). Each child view needs to refresh itself every 5 seconds. To do this I had the following [extract]:</p>
  
  <pre><code>Service: Backbone.View.extend({
      ...
  
      initialize: function () {
          this.model.bind('change', this.render, this);
          _.bindAll(this, 'update');
      },
  
      render: function () {
          ...
          this.update();
          return this;
      },
  
      update: function() {
          this.model.fetch();
          setTimeout(this.update, 5000);
      }
  
      ...
  </code></pre>
  
  <p>The <code>setTimeout</code> call to <code>update()</code>  of course worked as <code>this</code> was correctly bound to the view in question.</p>
  
  <p>The problem comes  in when I move setTimeout into the callback for <code>fetch</code>, as <code>this</code> now points to the global scope:</p>
  
  <pre><code>    update: function() {
          this.model.fetch({ success: function() {
              // this is now global
              setTimeout(this.update, 5000);
          }});            
      }
  </code></pre>
  
  <p>How can I achieve a continous (non-overlapping) update function. Or - how can I apply the view's scope to <code>this</code> inside the <code>fetch</code> callback?</p>
  
  <h2>Update</h2>
  
  <p>Was just going over this old question, and for future reference I follow this pattern nowadays as I find <code>_.bind</code> OTT here:</p>
  
  <pre><code>    update: function() {
          var self = this;
          this.model.fetch({ success: function() {
              setTimeout(self.update, 5000);
          }});            
      }
  </code></pre>