设置间隔随机+超时

Question

我试图在我的页面上显示 "wait"，然后是 "wait wait"，然后是 "wait wait wait" 等等，直到大约 100 次，我希望添加a "wait" 是随机的，到目前为止，我已经设法显示等待到 100，但我无法添加间隔的随机性..（现在我放 10 以便它很快结束）。

我找到了关于这些主题的答案，但我似乎无法将它们集成到我的代码中。

 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>

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>

设置间隔随机+超时

Set interval random + time out

javascript

random

jquery

timeout

setinterval