Как вы замедляете выполнение цикла for в JavaScript?

Question

Я делаю основной слайдер изображений (нажмите кнопку "Далее / предыдущий", и изображение изменится). Я также пытаюсь реализовать очень простой эффект затухания; Для этого у меня есть цикл for, который меняет класс изображения, циклически перебирая классы, которые изменяют непрозрачность. Код работает нормально и выполняет то, что я хочу, но цикл for выполняется так быстро, что вы не заметите изменения в непрозрачности. Я просмотрел все, и везде люди упоминают setTimeout, но это вызывает только отложенный запуск функции. Я просто хочу замедлить цикл for, чтобы вы могли визуально заметить каждую итерацию.

function nextphoto(){

    for(var x = 0; x < 5; x++){
        photo.className = fade[x];
    }

    i++;
    if(i>19){
    i=0;
    }

    photo.src = image[i];

    for(var y = 4; y >= 0; y--){
        photo.className = fade[y];
    }
}

Answer 1

Возможно, вы неправильно понимаете концепцию синхронного выполнения кода. Весь ваш код должен завершиться, прежде чем что-либо можно будет обновить или "отобразить" на экране. Таким образом, ваш цикл for будет работать до тех пор, пока он не будет завершен, затем экран обновится, но, конечно, он будет иметь только окончательный вид изображения для рендеринга.

Вы должны либо инициировать CSS-преобразование, динамически добавляя класс к элементу с помощью javascript, либо, если вы отчаянно пытались сделать все это в коде, у вас была какая-то причина не использовать CSS и не хотите писать пользовательскую анимацию для каждого кадра system, или используйте библиотеку, затем внутри каждой итерации цикла for запускайте асинхронную функцию, которая будет обновляться позже и позже, вне текущей синхронной для кода цикла.

то есть:

var aThing;
for(var i = 0; i < someNumber; i++){
  setTimeout(function(){
    aThing.someValue = aThing.someValue * .9;
  }, 500 * i);
}

Answer 2

Вам следует рассмотреть возможность использования функции animate() JQuery для анимации таких значений CSS, как непрозрачность. Еще лучше вы могли бы использовать CSS-анимацию.

То, что вы делаете, НЕ является хорошим способом достижения вашей цели. Если вы действительно хотите этого, вы должны использовать setInterval или setTimeout.