title: SetInterval on functions of an object from within the object
body: <p>I'm trying to create an object that will work on a <code>&lt;div&gt;</code> by replacing it's inner HTML periodically. I'm stumped with the part 'periodically', though. This is what I'm trying to do (the relevant parts of the code, I'm omitting unrelevant declarations etc.):</p>
  
  <pre><code>function LedDisplay() {
      this.initialize() {
          window.setInterval(this.redraw, 200);
      };
  
      this.redraw = function() {
          this.shiftDisplayMatrix();
          $('#' + this.name).html(this.createSvg());
      };
  
      this.shiftDisplayMatrix = function() {
          var firstRow = this.displayMatrix[0];
          this.displayMatrix.splice(0, 1);
          this.displayMatrix.push(firstRow);
      };
  };
  </code></pre>
  
  <p>This results in the following - <code>this.shiftDisplayMatrix is not a function</code>. I believe this is because <code>redraw</code> is called in the global context and there's no <code>this.shiftDisplayMatrix</code> there. What I cannot seem to find is how to achieve what I want.</p>
  
  <p>Or perhaps what I'm trying to do is an antipattern?</p>