Question

嗨，我终于以我想要的方式获得了进度条，有没有办法让它有延迟峰值？就像它实际加载数据一样，现在这只是为了我的网站上的外观，但我希望它看起来真实。继承人的代码。我需要和想要的最大延迟是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>

Answer 1

您可以将setInterval替换为setTimeout并使用随机超时重新安排

window.setTimeout(cycleb,10+Math.random()*300);

小提琴：http://jsfiddle.net/martijn/qqf90r3f/

替代秒杀：

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);
         }

http://jsfiddle.net/martijn/qqf90r3f/1/

如何为此添加随机延迟峰值？

1 个答案: