title: Backbone: using setInterval
body: <p>I need the view to refetched the collection and re-render every 30 seconds. The problem is that once I change page (without a full page refresh) the setInterval stays on memory and keeps refetching in the background. However the view has long been destroyed.</p>
  
  <p>Code:</p>
  
  <pre><code>define(
      [
          "underscore",
          "collection/system/feed",
          "view/list",
          "text!template/index/system-feed.html"
      ],
      function (_, Collection, ListView, Template) {
  
  
          return ListView.extend({
  
  
              el:             '&lt;div id="main-inner"&gt;',
              collection:     new Collection(),
              loading:        true,
              client:         false,
  
  
              initialize: function (options) {
  
                  this.collection.fetch();
                  this.collection.on('reset', this.onFetchCollection, this);
  
                  var self = this;
                  setInterval(function() {
                      self.collection.fetch();
                  }, 30000);
              },
  
  
              /*collection is returned, so reset the loading symbol and set the posts to the render*/
              onFetchCollection: function () {
                  this.list = this.collection.toJSON();
                  this.loading = false;
                  this.render();
              },
  
  
              render: function () {
                  var html = _.template(Template, {loading: this.loading, client: this.client, list: this.list});
                  this.$el.html(html);
                  return this;
              }
          });
      }
  );
  </code></pre>