setInterval函数不停止但无限运行

请检查以下内容: http://jsfiddle.net/wmaokqh3/

<div id="message">
</div>
<audio id="bgm" src="http://www.freesfx.co.uk/rx2/mp3s/9/10780_1381246351.mp3">
</audio>

<div id="count">
</div>


function Typer() {
  var dfd = $.Deferred();
  var srcText = 'EXAMPLE';
  var i = -(1);
  var result = '';
  setInterval(function() {
      if (i == srcText.length) {
        clearInterval(this);
        dfd.resolve();
      };
      $("#count").append('<br>i =' + i + ' , ');
      i++;
      result += srcText[i].replace("\n", "<br />");
      $("#message").html(result + '---' + i + ' , ');
    },
    1000);
  return dfd.promise();
}
function playBGM() {
  var playsound = $.Deferred();
  $('#bgm')[0].play();
  $("#bgm").on("ended", function() {
    playsound.resolve();
  });
  return playsound.promise();
}
function thirdFunction() {
  alert('third function');
}
Typer().then(playBGM).then(thirdFunction);