Can't get 'setTimeout' to delay with random time

Question

I found a great countdown-timer which counts down to every full minute on the clock and have paired it with a progress bar to better visualize the remaining time. When time is up (=the countdown reaches 1 second) it triggers a certain button press.

However I would like to add a random 0-10 seconds before it calls the button press. I have followed this, this and this post, but can't seem to get it to work. What am I missing?

Here's my code so far:

//timer 
setInterval(function () {
  var d = new Date();
  var seconds = d.getMinutes() * 60 + d.getSeconds(); //convet 00:00 to seconds for easier caculation
  var totaltime = 60 * 1; //five minutes is 300 seconds!
  var timeleft = totaltime - seconds % totaltime; // let's say 01:30, then current seconds is 90, 90%300 = 90, then 300-90 = 210. That's the time left!
  var result = parseInt(timeleft / 60) + ':' + timeleft % 60; //formart seconds into 00:00 
    
  document.getElementById('countdown_timer').innerHTML = result;


//progressbar 
  function progress(timeleft, timetotal, $element) {
      var progressBarWidth = (timetotal - timeleft) * ($element.width() / timetotal);
      $element.find('div').animate({
        width: progressBarWidth
      }, "linear"); 
    }
    progress(timeleft, totaltime, $('#progress_bar'));
  
    if (timeleft == 1) {
    setTimeout (document.getElementById('next_btn').click(), Random () );
    
    function Random() {    //randomgenerator
        var min = 0;
        var max = 10;
        var random = Math.floor(Math.random() * (max - min + 1) + min);
        // document.getElementById('randomNumber').value = random;
       // setTimeout(function() {document.getElementById('next_btn').click();},random)
    }
  }
    }, 1000)

#progress_bar {
  box-sizing: border-box;
  width: 95%;
  height: 26px;
  bottom: 22px;
  left: 50%;
  transform: translate(-50%);
  position: fixed;
  background-color: #1D789F;
  border-radius: 8px;
  z-index: 2;
}

#progress_bar div {
  height: 100%;
  line-height: 23px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  border-radius: 8px;
  background-color: #A05336;
}

#countdown_timer {
  position: fixed;
  bottom: 15px;
  left: 15%;
  z-index: 3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div id="progress_bar">
          <div></div></div>
        <div id="countdown_timer"></div>
     </div>

score 0 · Answer 1 · answered Feb 07 '21 at 22:18

The second argument to setTimeout is the number of milliseconds to delay before the function runs. Your current Random function returns a number between 0 and 10; a delay of 0ms is indistinguishable from a delay of 10ms.

Multiply the result by 1000 before passing to setTimeout.

setTimeout (() => document.getElementById('next_btn').click(), 1000 * Random() );

You also need to pass a function to setTimeout (a function that, when invoked, clicks), instead of invoking the .click immediately.

//timer 
setInterval(function () {
  var d = new Date();
  var seconds = d.getMinutes() * 60 + d.getSeconds(); //convet 00:00 to seconds for easier caculation
  var totaltime = 60 * 1; //five minutes is 300 seconds!
  var timeleft = totaltime - seconds % totaltime; // let's say 01:30, then current seconds is 90, 90%300 = 90, then 300-90 = 210. That's the time left!
  var result = parseInt(timeleft / 60) + ':' + timeleft % 60; //formart seconds into 00:00 
    
  document.getElementById('countdown_timer').innerHTML = result;


//progressbar 
  function progress(timeleft, timetotal, $element) {
      var progressBarWidth = (timetotal - timeleft) * ($element.width() / timetotal);
      $element.find('div').animate({
        width: progressBarWidth
      }, "linear"); 
    }
    progress(timeleft, totaltime, $('#progress_bar'));
  
    if (timeleft == 1) {
    setTimeout( () => { document.getElementById('next_btn').click(); }, 1000 * Random() );
    
    function Random() {    //randomgenerator
        var min = 0;
        var max = 10;
        var random = Math.floor(Math.random() * (max - min + 1) + min);
        // document.getElementById('randomNumber').value = random;
       // setTimeout(function() {document.getElementById('next_btn').click();},random)
    }
  }
    }, 1000)

#progress_bar {
  box-sizing: border-box;
  width: 95%;
  height: 26px;
  bottom: 22px;
  left: 50%;
  transform: translate(-50%);
  position: fixed;
  background-color: #1D789F;
  border-radius: 8px;
  z-index: 2;
}

#progress_bar div {
  height: 100%;
  line-height: 23px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  border-radius: 8px;
  background-color: #A05336;
}

#countdown_timer {
  position: fixed;
  bottom: 15px;
  left: 15%;
  z-index: 3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div id="progress_bar">
          <div></div></div>
        <div id="countdown_timer"></div>
     </div>

Can't get 'setTimeout' to delay with random time

1 Answers1