Javascript 使用不同的时间在循环中设置超时

我有一个正在创建的加载条，并在var barMovement中传递不同的毫秒和样式参数

我的问题是，在setTimeout函数中，时间为100毫秒的最后一个参数不是最后输出的

当我用控制台记录结果时，结果显示为100200200100200300，而应该是100200200200300100

如果我理解正确的话，100的最后一个参数是首先输出的，因为它更快，但是有没有解决方法，或者有没有方法使setTimeout延迟到上一个setTimeout循环完成

谢谢

function BarSequence(style){
 this.style = style

 this.move = function(styles) {
  var i = 0;

  for(len = styles.length; i < len; i++){

    (function loopy(index) {

        setTimeout(function() {
          console.log(style[index])
        }, i * style[index][0]);
    })(i);

   }
  }
}

var barMovement = new BarSequence([
[100, { width: '10%' }],
[200, { width: '20%' }],
[200, { width: '50%' }],
[200, { width: '80%' }],
[300, { width: '90%' }],
[100, { width: '100%' }]
]);

barMovement.move(barMovement.style);

功能条序列（样式）{
this.style=风格
this.move=函数（样式）{
var i=0；
对于（len=style.length；i

我相信做这件事的唯一方法是在彼此内部声明设置超时，比如：

setTimeout(function(){
    //execute the work to be done
    setTimeout(function(){
        //execute the work to be done
        // ... and so on
    })
});

您可以尝试重新排列代码逻辑以执行类似的操作。如果在此期间我找到更好的解决方案，我将编辑答案

编辑：这很好地解释了setTimeout执行是如何处理的

---

编辑2：这是一个糟糕的方法，因为删除代码的动态性不是一个好的实践。检查@epascarello中的值，然后将其乘以索引。所以你的超时是0，200，400，600，1200，500，所以最后一个是在400和600之间

为了让它们按顺序加载，您需要将上一次添加到它。您应该做的是不要使用循环超时。只需增加一个计数器并遍历数组

var barMovement=[
[100，{宽度：'10%}]，
[200，{宽度：'20%}]，
[200，{宽度：'50%}]，
[200，{宽度：'80%}]，
[300，{宽度：'90%}]，
[100，{宽度：'100%}]
];
var-cnt=0；
函数运行（）{
setTimeout（函数（）{
document.getElementById（“bar”）.style.width=bar移动[cnt][1]。宽度
cnt++；
如果（cnt

#条{
背景颜色：绿色；
宽度：0；
}

---

为什么在

i*style[index][0]

中将时间乘以

i

？您将时间乘以索引。所以你的超时是0，200，400，600，1200，500所以最后一个会出现在@epascarello的400到600个可能的副本之前。你完全正确，静态代码不应该是方法，答案就在现场