Javascript 为什么setInterval（）的反向for循环不起作用？

我有一系列的图像，这些图像迭代通过并将其不透明度更改为1，从而创建动画效果。我现在需要反转动画/序列，但是我的带有for循环的reverseSequence（）函数不起作用，导致应用程序中断

我的代码如下：

forwardSequence() {
    let images = document.getElementsByClassName("sequenceImage");
    for (var i = 0; i < images.length; i++) {
      (function(idx) {
        setTimeout(function() {
          images[idx].style.opacity = 1;
        }, 50 * (idx + 1))
      })(i);
    }
  }

  reverseSequence() {
    let images = document.getElementsByClassName("sequenceImage");
    for (var i = images.length; i > 0; i--) {
      (function(idx) {
        setTimeout(function() {
          images[idx].style.opacity = 0;
        }, 50 * (idx + 1))
      })(i);
    }
  }

reverseSequence（）

是一个无限循环

将（变量i=51；i>0；i++）的

更改为（变量i=51；i>0；i--）的

干杯！
reverseSequence（）
是一个无限循环

将（变量i=51；i>0；i++）的
更改为（变量i=51；i>0；i--）的

干杯！我强烈鼓励使用
async
和
wait
-

异步睡眠（毫秒）{
返回新承诺（r=>setTimeout（r，ms））
}
异步转发序列（）{
让images=document.getElementsByClassName（“sequenceImage”）；
用于（图像的常数）{
等待睡眠（50）
img.style.opacity=1
}
}
异步反向序列（）{
让images=document.getElementsByClassName（“sequenceImage”）；
对于（设i=images.length-1；i>=0；i--）{
等待睡眠（50）
图像[i]。style.opacity=0
}
}

或者至少，使用承诺。将序列作为参数传递给
正向
或
反向
-

const sleep = ms =>
  return new Promise(r => setTimeout(r, ms))

forward(sequence) {
  Array.prototype.reduce.call
    ( sequence
    , (r, img) =>
        r.then(_ => sleep(50))
         .then(_ => img.style.opacity = 1)
    , Promise.resolve()
    )
}

reverse(sequence) {
  Array.prototype.reduceRight.call // <-- reduceRight
    ( sequence
    , (r, img) =>
        r.then(_ => sleep(50))
         .then(_ => img.style.opacity = 0)
    , Promise.resolve()
    )
}

我强烈鼓励使用
async
和
wait
-

异步睡眠（毫秒）{
返回新承诺（r=>setTimeout（r，ms））
}
异步转发序列（）{
让images=document.getElementsByClassName（“sequenceImage”）；
用于（图像的常数）{
等待睡眠（50）
img.style.opacity=1
}
}
异步反向序列（）{
让images=document.getElementsByClassName（“sequenceImage”）；
对于（设i=images.length-1；i>=0；i--）{
等待睡眠（50）
图像[i]。style.opacity=0
}
}

或者至少，使用承诺。将序列作为参数传递给
正向
或
反向
-

const sleep = ms =>
  return new Promise(r => setTimeout(r, ms))

forward(sequence) {
  Array.prototype.reduce.call
    ( sequence
    , (r, img) =>
        r.then(_ => sleep(50))
         .then(_ => img.style.opacity = 1)
    , Promise.resolve()
    )
}

reverse(sequence) {
  Array.prototype.reduceRight.call // <-- reduceRight
    ( sequence
    , (r, img) =>
        r.then(_ => sleep(50))
         .then(_ => img.style.opacity = 0)
    , Promise.resolve()
    )
}

扎卡里，不客气。我做了一个小的更新，展示了如何使代码更灵活：太好了，我刚刚看到了这一点，再次感谢你——我确实有一个问题，因为我仍然非常了解这一点——我如何在按钮上调用forwardSequence，在另一个按钮上调用reverseSequence？目前我将做以下工作g:正向动画反向动画扎卡里，不客气。我做了一个小的更新，展示了如何使代码更灵活：太好了，我刚刚看到了这一点，再次感谢你-我有一个问题，因为我仍然在学习这方面的东西-我如何调用按钮上的正向序列和不同bu上的反向序列tton？目前我会做以下工作：正向动画反向动画
const sleep = ms =>
  return new Promise(r => setTimeout(r, ms))

forward(sequence) {
  Array.prototype.reduce.call
    ( sequence
    , (r, img) =>
        r.then(_ => sleep(50))
         .then(_ => img.style.opacity = 1)
    , Promise.resolve()
    )
}

reverse(sequence) {
  Array.prototype.reduceRight.call // <-- reduceRight
    ( sequence
    , (r, img) =>
        r.then(_ => sleep(50))
         .then(_ => img.style.opacity = 0)
    , Promise.resolve()
    )
}

forward(sequence, effect) { // <-- effect parameter added
  Array.prototype.reduce.call
    ( sequence
    , (r, img) => r.then(_ => sleep(50)).then(_ => effect(img))
    , Promise.resolve()
    )
}

reverse(sequence, effect) { // <-- effect parameter added
  Array.prototype.reduceRight.call
    ( sequence
    , (r, img) => r.then(_ => sleep(50)).then(_ => effect(img))
    , Promise.resolve()
    )
}

const seq =
  document.getElementsByClassName("sequenceImage")

forwardSequence(seq, img => img.style.opacity = 1)

reverseSequence(seq, img => img.style.opacity = 0)