CODEWITHSUNDEEP
javascriptjqueryrandomtimeoutsetinterval
Dikeneko
Dikeneko

Reputation: 358

Set interval random + time out

I am trying to show on my page "wait", then "wait wait", then "wait wait wait" etc. up until ~100 times, and I want that the time between the add of a "wait" is random, so far, I've managed to show up the wait until 100, but I can't add the random of the interval.. (right now I put 10 so that it ends quickly).

I have found those answers on the subjects, but I can't seem to integrate them to my code..

setInterval + Random Number setInterval + Random Number

 var timesRun = 0;
        var t = "wait";
        var interval = setInterval(function(){
            timesRun += 1;
            if(timesRun === 10){
              t = t + "...";
              document.getElementById("sample2-progress").innerHTML = t;
              clearInterval(interval);
            }

            document.getElementById("sample2-progress").innerHTML = t;
             t = t + " wait";
            

        }, 200); 
#preloader  {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #000;
     z-index: 99999;
    height: 100%;
    overflow: hidden;
 }

#status  {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0%;
     color: white;
     top: 0%;
     background-repeat: no-repeat;
     background-position: center;
     /*margin: -50% 0 0 -50%;*/
     text-align: center;
 }

 #sample2-log{
 	display: none;
 }

 #sample2-progress{
 	font-size: 6vh;
top: 2vw;
position: fixed;
text-align: center;
width: 98vw;
left: 2vw;
text-align:left;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div id="preloader">

    <div id="status">
      <textarea id="sample2-log"></textarea>
      <div id="sample2-progress" class="progress"></div>
    </div>

  </div>

Upvotes: 0

Views: 600

Answers (1)

Rajesh
Rajesh

Reputation: 24945

In my understanding, since you need different interval in every run, its better to use setTimeout.

Note: For demonstration purpose, I have kept delay range up to 10 secs. You can check delay's value in console.

Sample Code

var timesRun = 0;
var t = "wait ";

function initTimeout() {
  var delay = Math.floor(Math.random() * 1000000) % 10000;
  console.log(delay)
  setTimeout(function() {
    var str = "...";
    if (++timesRun < 10) {
      str = t
      initTimeout();
    }
    notify(str);
  }, delay);
}

function notify(str) {  
  document.getElementById("sample2-progress").innerHTML += str;
}
initTimeout();
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 99999;
  height: 100%;
  overflow: hidden;
}

#status {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0%;
  color: white;
  top: 0%;
  background-repeat: no-repeat;
  background-position: center;
  /*margin: -50% 0 0 -50%;*/
  text-align: center;
}

#sample2-log {
  display: none;
}

#sample2-progress {
  font-size: 6vh;
  top: 2vw;
  position: fixed;
  text-align: center;
  width: 98vw;
  left: 2vw;
  text-align: left;
}
<div id="preloader">
  <div id="status">
    <textarea id="sample2-log"></textarea>
    <div id="sample2-progress" class="progress"></div>
  </div>
</div>

Upvotes: 1

Related Questions