Start timer after another timer has stopped

Question

I've been working on a code for a school project and I'm pretty new into JavaScript. I've written code for a timer which is counting down from 40 to 0 in 40 seconds. After that, I want to have another timer but with a different text starting where the first time has been stopped.

But I can't figure out how to do it. I've heard about setInterval, but I don't know how to apply it..

My code:

<script type="text/javascript">
  function countDown(secs, elem) {
    var element = document.getElementById(elem);
    element.innerHTML = "Word bereid, nog " + secs + " seconde te gaan";
    if (secs < 1) {
      clearTimeout(timer);
      element.innerHTML = '';
    }
</script>
    secs--;
    var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);
    }
<div id="status">
</div>
<script type="text/javascript">
  countDown(5, "status")
</script>
</div>

You tagged this question `java`. I think you meant `javascript`. They are not the same thing. — khelwood, Nov 29 '18 at 15:35
*If you're lost, you can look and you will find me / Timer after timer / If you fall, I will catch you, __I will be waiting__ / Timer after timer …* — deceze, Nov 29 '18 at 15:37
Possible duplicate of ['setInterval' vs 'setTimeout'](https://stackoverflow.com/questions/2696692/setinterval-vs-settimeout) — Peter B, Nov 29 '18 at 15:39

silentw · Answer 1 · 2018-11-30T10:26:54.280

2

countDown(5, "status");

function countDown (secs, elem) {
    var element = document.getElementById(elem);
    var timer = setInterval(() => {
      console.log(secs, 'seconds remaining');
      
      element.innerHTML = "Word bereid, nog " + secs + " seconde te gaan";
      if(secs < 1) {
          clearInterval(timer);
          element.innerHTML = '';
          console.log('timer after timer...');
      }
      secs--;
    }, 1000);
}

<div id="status"></div>

edited Nov 30 '18 at 10:26

answered Nov 29 '18 at 15:43

silentw

4,835
4
25
45

It is possible to clear `setInterval()`timer with `clearTimetout()`? Apparently so. Interesting. – HynekS Nov 29 '18 at 15:56
1

@HynekS The pool IDs used by `setTimeout()` and `setInterval()` are shared, which means you can technically use `clearTimeout()` and `clearInterval()` interchangeably. However, for clarity, you should avoid doing so. [Source](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout) – silentw Nov 30 '18 at 10:25
@HynekS Changed the code for clarity. Thanks for pointing out. – silentw Nov 30 '18 at 10:27

score 0 · Answer 2 · answered Nov 29 '18 at 15:46

if you just want a countdown that updates every second you should use

var interval = setInterval(function(){ code here }, 1000);

this will call it every second, and when your timer hits zero use

clearInterval(interval);

and this will stop executing your code.

Chand Ra · Answer 3 · 2018-11-29T17:58:18.410

let timeout=40;
let incrementTimer=null;
let decrementTimer=null;
let element = document.getElementById("status");
decrementTimer=setInterval(decrement,1000);

function decrement(){
    element.innerHTML = "Word bereid, nog " + timeout + " seconde te gaan";
    timeout--;
    if(timeout==0){
        element.innerHTML="";
        clearTimeout(decrementTimer);
        incrementTimer=setInterval(increment,1000);
    }
}

function increment(){
    element.innerHTML = "Word bereid, nog " + timeout + " seconde te gaan";
    timeout++;
    if(timeout==40){
        element.innerHTML="";
        clearTimeout(incrementTimer);
        decrementTimer=setInterval(decrement,1000);
    }
}

score 0 · Answer 4 · answered Nov 29 '18 at 16:10

0

i want it to count down from 40 to 0 and after that again from 0 to 40.

answered Nov 29 '18 at 16:10

Stijn

1
3

anyone, i honestly can't figure it out – Stijn Nov 29 '18 at 17:03

Start timer after another timer has stopped

4 Answers4