Javascript加载栏

Question

我如何制作一个加载栏，我还希望它是“可堆叠”的，就像在同一页面上有2个并且第一个触发第二个完成后第二个重定向到100的URL ％，这对你们来说可能是基本的，也可能不是，但对我来说真的很难。我已经有一个过时的JavaScript了，但是当我添加第二个并且不知道如何使它触发第二个时它就消失了。如果你想尝试编辑我拥有的那个，那么它会触发第二个并且可以堆叠，然后就这么说，但请注意它已过时，我知道，我正在使用它，因为配置和设置非常简单。

这是迄今为止的相关代码：

var currentAdb = 0;
var imgCtb = 25;

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

#adLinkb {
  font-size: 12px;
  color: #000;
  font-family: monospace;
}

<div id="adLinkb"></div>

Answer 1

好的，让我们通过将其分组到函数中并引入回调来扩展我在上一个问题中给出的代码：

function buildBar(id, callback) {
  var currentAdb = 0;
  var imgCtb = 25;

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

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

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

buildBar('adLinkb', callback1);

#adLinkb,
#adLinkb2 {
  font-size: 12px;
  color: #000;
  font-family: monospace;
}

<div id="adLinkb"></div>
<div id="adLinkb2"></div>