Question

我正在努力尝试按多次点击排序多个加载条并遵循一个简单的队列机制，但我遇到了一个简单的范围问题，我无法访问队列变量来运行我存储的所有函数onClick事件触发后 -

JS

var progressBar = document.getElementsByClassName('progress-bar');
var button = document.getElementsByClassName('start');
var funqueue = [];


var loadingBar = function() {
  setTimeout(function() {
  progressBar[0].style.width = "10%";
  setTimeout(function() {
    progressBar[0].style.width = "30%";
    setTimeout(function() {
      progressBar[0].style.width = "50%";
      setTimeout(function() {
        progressBar[0].style.width = "100%";
        }, 2000)
      }, 500)
    }, 2000)    
  }, 1000); 
} 

button[0].addEventListener('click', function() {
    console.log(funqueue);
    funqueue.push(loadingBar);
});

setTimeout(function() {
  console.log(funqueue);    
  (funqueue.shift())();
}, 1000);

HTML

<div class="progress">
  <div class="progress-bar"></div>
  <button class="start">Start</button>
</div>

CSS

.progress-bar {
  width: 0%;
  height: 100%;
  border: 10px solid red;
}

我在这里和那里有一些控制台日志，因为我试图调试为什么变量funqueue在范围内不可用。我试图实现我的按钮三次点击的行为，将运行loadingIndicator函数三次。

Javascript：多次点击时排队多个加载栏

0 个答案: