Почему мой реверс для l oop с setInterval () не работает?

Question

У меня есть последовательность изображений, которая перебирает и меняет их непрозрачность на 1, создавая эффект анимации. Теперь мне нужно изменить анимацию / последовательность, однако моя функция reverseSequence () с for для l oop не работает и ломает приложение.

Мой код выглядит следующим образом:

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);
    }
  }

Изображения:

<img class="sequenceImage" src="https://via.placeholder.com/50/0000FF/808080?Text=image1" /><br>
<img class="sequenceImage" src="https://via.placeholder.com/50/0000FF/808080?Text=image2" /><br>
<img class="sequenceImage" src="https://via.placeholder.com/50/0000FF/808080?Text=image3" /><br>
<img class="sequenceImage" src="https://via.placeholder.com/50/0000FF/808080?Text=image4" /><br>
<img class="sequenceImage" src="https://via.placeholder.com/50/0000FF/808080?Text=image5" /><br>

app.s css

.imageSequence {
  opacity: 0;
}

Answer 1

Я бы настоятельно рекомендовал использовать async и await -

async sleep(ms) {
  return new Promise(r => setTimeout(r, ms))
}

async forwardSequence() {
  let images = document.getElementsByClassName("sequenceImage");
  for (const img of images) {
    await sleep(50)
    img.style.opacity = 1
  }
}

async reverseSequence() {
  let images = document.getElementsByClassName("sequenceImage");
  for (let i = images.length - 1; i >= 0; i--) {
    await sleep(50)
    images[i].style.opacity = 0
  }
}

Или, по крайней мере, использовать обещания. Возможно, имеет смысл передать последовательность в качестве аргумента forward или reverse -

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()
    )
}

Дальнейшая абстракция делает ваш код еще более обобщенным c и, следовательно, более пригодным для повторного использования; выиграть / выиграть! -

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)

Answer 2

reverseSequence() - это бесконечное число l oop.

Изменить for (var i = 51; i > 0; i++) { на for (var i = 51; i > 0; i--) {

Приветствия! 100