Javascript 如何将随机延迟尖峰添加到这一点?

Javascript 如何将随机延迟尖峰添加到这一点?,javascript,html,Javascript,Html,嗨,我终于得到了我想要的进度条,有没有办法让它有延迟尖峰?就像它实际加载的数据,现在这只是为了在我的网站上看,但我希望它看起来真实。这是密码。我需要和想要的最大延迟是500毫秒 <html><head> <style> #adLinkb, #adLinkb2 { font-size: 12px; color: #fff; font-family:sans-serif; } </style> </he

嗨,我终于得到了我想要的进度条,有没有办法让它有延迟尖峰?就像它实际加载的数据,现在这只是为了在我的网站上看,但我希望它看起来真实。这是密码。我需要和想要的最大延迟是500毫秒

<html><head>
    <style>
        #adLinkb,
#adLinkb2 {
  font-size: 12px;
  color: #fff;
  font-family:sans-serif;
}
    </style>
</head>
<body>
    <div id="adLinkb" style="border: 1px solid black;width:212;background-color:black;border-color:white"></div>
    <br>
<div id="adLinkb2" style="border: 1px solid black;width:212;background-color:black;border-color:white"></div>
    <script type="text/javascript">
        function buildBar(id, callback) {
  var currentAdb = 0;
  var imgCtb = 70;

  function cycleb() {
    var output = '';
    for (var i = 0; i < imgCtb; i++) {
      output += i > currentAdb ? '&nbsp;' : '/';
    }
    output += '';
    document.getElementById(id).innerHTML = output;
    ++currentAdb;
    if (currentAdb == imgCtb) {
      window.clearInterval(myInterval);
      if (typeof callback == 'function') {
        callback();
      }
    }
  }
  var myInterval = window.setInterval(cycleb, 100);
}

function callback1() {
  buildBar('adLinkb2', callback2);
}

function callback2() {
  //window.location... stuff here
  alert('redirect should go here');
}

buildBar('adLinkb', callback1);
    </script>

</body></html>
您可以使用setTimeout替换setInterval,并使用随机超时重新调度

window.setTimeoutcycleb,10+数学.random*300

小提琴:

替代峰值:

if(Math.random()>0.9)
         {
             // 10% change on a spike
                window.setTimeout(cycleb,10+Math.random()*1000);
         }
         else{
             window.setTimeout(cycleb,10+Math.random()*10);
         }

旁注,您在这里通过显示“进度模拟”来“愚弄”用户。您可能不知道请求需要多长时间,或者提供一个真正的进度系统是不可行的。考虑使用一个不确定的进度指示器。请看:谢谢,但我看不出有什么变化。有没有办法使尖峰显示的速度越来越慢?