Question

我通过使用JS动态更改CSS值来创建动画，我了解forloop的工作原理，但是当我使用setTimeout添加小延迟时，我完全颠倒了初始index

的顺序

for (var i = 100; i >= 0; i--) {
 console.log('B/' + i); // This one's fine
   (function (index) {
      setTimeout(function (index) {
      // console.log('B/' + index) WHAT HAPPENED?!
      root.style.setProperty('--clip3', index + "%");
      root.style.setProperty('--clip4', index + "%");
      }, i * 10);
   })(i);
}

我的意思是我可以访问正确的index，而不能访问setTimeout内部。在上面的示例中，我希望以10ms的延迟从100变为0。实际的代码与我正在寻找的相反

Answer 1

编辑此行：

setTimeout(function (index) {

要这样：

setTimeout(function () {

注意：

第一个循环：i = 100，所以i * 10表示它将在1000毫秒后开始

第二个循环，i = 99，所以i * 10表示它将在990ms之后开始

...

上一个循环，i = 0，所以i * 10表示它将立即开始。

另一个说明：

您可以考虑使用setInternal代替setTimeout

完整代码：

var clip = 100;
var intervalId = setInterval(function() {
    if(clip < 0) {
        clearInterval(intervalId);// Don't call next iteration
        return;// Don't continue this iteration
    }
    root.style.setProperty('--clip3', clip + "%");
    root.style.setProperty('--clip4', clip + "%");
    clip--;
}, 10);

向后forloop javascript中使用setTimeout丢失索引

1 个答案: