setInterval function not stopping but runs infinitely

Question

Please check this on : 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);

because `this` has nothing to do with the interval Id..... – epascarello Apr 04 '18 at 04:05 — epascarello, Apr 04 '18 at 04:05
@epascarello: so what shall I use to cease its action? – sqlchild Apr 04 '18 at 04:08 — sqlchild, Apr 04 '18 at 04:08

score 3 · Accepted Answer · answered Apr 04 '18 at 04:07

3

Not sure where you learned to do clearInterval(this) but that is not correct. The this has nothing to do with the current interval. You need to use the generated id for the interval to cancel it.

var myInterval = window.setInterval(  )

and in your code you need to use that id

clearInterval(myInterval)

answered Apr 04 '18 at 04:07

epascarello

204,599
20
195
236

Seems we both like `myInterval` – CertainPerformance Apr 04 '18 at 04:08
@epascarello : I learned using THIS from Red Rum's answer to this : https://stackoverflow.com/questions/19674380/execute-jquery-function-after-another-function-completes – sqlchild Apr 04 '18 at 04:22

score 1 · Answer 2 · answered Apr 04 '18 at 04:07

1

You have to assign the setInterval to a variable in order to clear it later:

var result = '';
const myInterval = setInterval(function() {
  if (i == srcText.length) {
    clearInterval(myInterval);

answered Apr 04 '18 at 04:07

CertainPerformance

356,069
52
309
320

is using const here better than var ?? – sqlchild Apr 04 '18 at 04:30
In general, *always* use `const` when possible - it behaves more reasonably and predictably, and makes reading code easier. (Use `let` if you have to reassign) – CertainPerformance Apr 04 '18 at 05:23

score 1 · Answer 3 · answered Apr 04 '18 at 04:48

So there is nothing in coding clearInterval(this) clearInterval function needs a variable in the paranthesis in order to give it a variable you should set the interval function into a variable which should be like this var inter = window.setInterval(function() {}, 1000);

setInterval function not stopping but runs infinitely

3 Answers3