임의 간격 + 시간 초과 간격 설정

Question

내 페이지 "대기", "대기 대기", "대기 대기"등을 ~ 100 번까지 표시하려고합니다. 추가 할 때까지의 시간을 지정합니다. "기다림"은 무작위로, 지금까지 100까지 기다림을 보여 주었지만 간격의 무작위를 추가 할 수는 없습니다. (바로 지금 나는 10을 넣어 빨리 끝납니다). 나의 이해에 ..

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{ 
 
    \t display: none; 
 
} 
 

 
#sample2-progress{ 
 
    \t 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>

Answer 1

나는 주제에 그 답을 발견했다,하지만 난 내 코드로 통합 할 수없는 것 , 매 달리기마다 다른 간격이 필요하므로 setTimeout을 사용하는 것이 좋습니다.

참고 : 데모 목적으로 지연 시간을 최대 10 초로 유지했습니다. 콘솔에서 지연 값을 확인할 수 있습니다.

샘플 코드

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>