Question

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

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

当我控制台记录结果时，它们显示为 100,200,200,100,200,300 ，当它应 100,200,200,200,300,100时即可。

如果我理解正确的话，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);

Answer 1

我相信做这种事情的唯一方法是在彼此内部声明setTimeouts，例如：

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

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

编辑：这个answer很好地解释了如何处理setTimeouts执行。

编辑2：这是一个糟糕的方法，因为删除代码的动态不是一个好习惯。查看来自@epascarello的answer

setTimeout在循环中具有不同的时间

1 个答案: