How to stop timer after ten seconds in javascript using setInterval and clearInterval?

Question

I was wondering how can I stop a timer after ten seconds in javascript using setInterval and clearInterval?? Here's my code example, could you please tell me where I'm going wrong:

<!DOCTYPE html>
<html>
<head>
<script>

var tt=setInterval(function(){startTime()},1000);


function startTime()
{
  var today = new Date();
  var h=today.getHours();
  var m=today.getMinutes();
  var s=today.getSeconds();
  // add a zero in front of numbers<10
  m=checkTime(m);
  s=checkTime(s);
  today=checkTime(today);
  document.getElementById('txt').innerHTML=s;

}

function checkTime(tt)
{
if (tt==10)
  {
    tt="0" + tt;
    console.log(tt);
    clearInterval(tt);
  }
return tt;
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

Your code makes no sense! `checkTime` is being called with 3 different values? — epascarello, Sep 10 '13 at 12:51
Consider how _setInterval_ can be dangerous if your function takes longer to complete than the given interval. — Paul S., Sep 10 '13 at 12:51

Tomzan · Answer 1 · 2014-03-20T02:28:28.733

16

you can set timeout on clear like this right after you set the interval:

var tt = setInterval(function(){ startTime() }, 1000);
setTimeout(function() { clearInterval(tt); }, 10000);

edited Mar 20 '14 at 02:28

answered Sep 10 '13 at 12:51

Tomzan

2,808
14
25

3

I don't know why, but this answer was downvoted even though it's the simplest answer of all and it works. It sets an interval and clears it after 10 seconds. That's exactly what it's supposed to do. – Butt4cak3 Sep 10 '13 at 13:09

score 6 · Accepted Answer · answered Sep 10 '13 at 12:56

Since startTime() will run every second, make a counter to increment to 10 inside of it, then clear the interval.

var tt=setInterval(function(){startTime()},1000);
var counter = 1;

function startTime()
{
  if(counter == 10) {
    clearInterval(tt);
  } else {
    counter++;
  }

  document.getElementById('txt').innerHTML= counter;  
}

JSFiddle

epascarello · Answer 3 · 2013-09-10T12:54:13.047

3

Because you named a local variable named tt which does not let you access the global variable tt. Very bad planning on variable names.

Your code also will not stop at 10 seconds, it will stop when the time is at 10 seconds or 10 minutes.

function checkTime(xtt)
{
if (xtt==10)
  {
    xtt="0" + xtt;
    console.log(xtt);
    clearInterval(tt);
  }
return xtt;
}

edited Sep 10 '13 at 12:54

answered Sep 10 '13 at 12:48

epascarello

204,599
20
195
236

1

Nice catch(i think - can barely read the stuff), mind answering the question next :P? – UIlrvnd Sep 10 '13 at 12:52

score 3 · Answer 4 · edited Aug 26 '16 at 06:03

3

This works for me.

var tt = setInterval(function(){ startTime() }, 1000);

setTimeout(function() { clearInterval(tt); }, 10000);

edited Aug 26 '16 at 06:03

Gynteniuxas

7,035
18
38
54

answered Aug 19 '16 at 16:47

Sayid Dastaan

47
1
2

2

If you want to thank Tomzan for his answer, you should upvote it instead of adding an answer – andrewsi Aug 26 '16 at 01:05
1

As already noted before, this is a exact duplicate of above anwser. – Luis David Oct 05 '19 at 05:21

score 0 · Answer 5 · answered May 03 '20 at 21:54

0

you can do that

setInterval(startTime, 1000).pipe(takeUntil(timer(10000)));

answered May 03 '20 at 21:54

itai schwed

399
4
5

How to stop timer after ten seconds in javascript using setInterval and clearInterval?

5 Answers5