title: JS SetInterval Speeds Up
body: <p>Could someone explain why the following code behaves correctly for the first few repeats and then speeds up to manic pace? I searched and found that I should clearInterval before setInterval, but it made no difference.</p>
  <pre class="lang-js prettyprint-override"><code>var begin = window.onload = function() {
    var canvas = document.getElementById(&quot;canvas&quot;),
      context = canvas.getContext(&quot;2d&quot;),
      width = canvas.width = 600,
      height = canvas.height = 600;
  
    var stripWidth = Math.floor(Math.random() * (50 - 5 + 1) + 5);
    for (i = 0; i &lt;= (width / stripWidth); i++) {
      context.strokeRect(stripWidth * i, stripWidth * i, width - (2 * i * stripWidth), width - (2 * i * stripWidth));
    }
    clearInterval(begin);
    setInterval(begin, 1000);
  };
  </code></pre>