Javascript action when progress bar (HTML5) is over

Question

I've added a timer using a HTML5 progress bar. When clicking on a button, the bar is set on with the following function. It works well, but what I would like to add is trigger an action when the progress is over, and also be able to stop the progress when clicking on another button.

<progress value="0" max="40" id="pbar" ></progress>
   <div id="start-stop">
       <button id="start" onclick="start_countdown()">Start</button>
       <button id="stop">Stop</button>
   </div>
...
function start_countdown(){
    var reverse_counter = 40;
    var downloadTimer = setInterval(function(){
    document.getElementById('pbar').value = 40 - --reverse_counter;
    if(reverse_counter <= 0)  
    clearInterval(downloadTimer);
    },1000);
}

Hi, this seems like a duplicate of https://stackoverflow.com/questions/41424989/javascript-listen-for-attribute-change — Mario Perez, Apr 30 '20 at 20:12

score 1 · Accepted Answer · answered Apr 30 '20 at 20:34

1

in order to stop any timer, you can use a global variable and name it whatever you want, so u can able to trigger and cancel the timer at any time. so I create a function that cancels the timer depending on that global variable as I mentioned before.

<progress value="0" max="40" id="pbar" ></progress>
<div id="start-stop">
  <button id="start" onclick="start_countdown()">Start</button>
  <button id="stop" onClick="clearinterval()">Stop</button>
</div>
var interval;
function start_countdown(){
  var reverse_counter = 40;
  interval= setInterval(function(){
  document.getElementById('pbar').value = 40 - --reverse_counter;
  if(reverse_counter <= 0)  
    clearInterval(interval);
   },1000);
 }
function clearinterval (){
  clearInterval(interval);
}

answered Apr 30 '20 at 20:34

Abdelmonaem Shahat

532
2
6

thanks this works great for stoping the progress! And what about triggering an action when the progress is over? (and not ended manually by clicking on stop) – cyberlp Apr 30 '20 at 21:24
you can declare a boolean variable which you can make it true after clearing the interval and trigger any function if that variable is only and make it false again after finishing call back function – Abdelmonaem Shahat Apr 30 '20 at 21:27
You mean there: ` if(reverse_counter <= 0) clearInterval(interval); over = true; ` then `if (over === true) { alert('...'); }` because it doesnt seem to work – cyberlp Apr 30 '20 at 21:51

54ka · Answer 2 · 2020-04-30T21:22:43.280

I hope this works for you. Play, Pause, Stop

<progress value="0" max="40" id="pbar" ></progress>
<div id="start-stop">
  <button id="start" onclick="start_countdown()">Start</button>
  <button id="stop" onclick="pause_countdown()">Pause</button>
  <button id="stop" onclick="stop_countdown()">Stop</button>
</div>

<script type="text/javascript">

  var downloadTimer;
  var reverse_counter = 40;
  function start_countdown(){
      downloadTimer = setInterval(function(){
        document.getElementById('pbar').value = 40 - --reverse_counter;
        if(reverse_counter <= 0) {  
          clearInterval(downloadTimer);
        }
      },1000);
      console.log(reverse_counter);
  }

  function stop_countdown(){
      reverse_counter = 0;
      document.getElementById('pbar').value = 0;
      window.clearInterval(downloadTimer);
      reverse_counter = 40;
  }

  function pause_countdown(){
      window.clearInterval(downloadTimer);
  }

</script>

Javascript action when progress bar (HTML5) is over

2 Answers2