Проблема с jQuery .fadeIn() queue

Question

У меня возникла странная проблема с jQuery и циклом замирания. Давайте посмотрим немного кода (здесь на JSFiddle: http://jsfiddle.net/4fcvze4m/1/):

$('.spin-block').each(function(index) { 
 
\t $(this).delay(index * 200 + 800).fadeIn(); 
 
})

.spin-block { 
 
    display: none; 
 
    margin: 5px; 
 
    padding: 10px; 
 
    background: #a00000; 
 
    color: #fff; 
 
}

<div class="spin-block">1</div> 
 
<div class="spin-block">2</div> 
 
<div class="spin-block">3</div> 
 
<div class="spin-block">4</div> 
 
<div class="spin-block">5</div> 
 
<div class="spin-block">6</div> 
 
<div class="spin-block">7</div> 
 
<div class="spin-block">8</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Это в основном это.

Итак, иногда (это очень случайный случай), один из этих блоков не отображается, преимущественно 5-й или 6-й. Он может работать отлично 30 раз подряд и иметь эту проблему при следующем обновлении. Я попытался обойти с этим:

$('.spin-block') 
    .each(function(index) { 
     $(this).delay(index * 200 + 800).fadeIn(); 
    }) 
    .promise().done(function() { 
     console.log('debug'); 
     $(this).fadeIn(); 
    }); 

Когда все в порядке, то «отладка» войти выпендриваться, но когда есть один отсутствует, консоль остается пустой, даже если появится следующий .spin-блок. И если я заставить некоторые блоки не показывать, то этот способ хорошо работает и исчезают в оставшихся (после окончания анимации, но я не забочусь):

var i = 800; 
$('.spin-block') 
    .each(function() { 
     i += 200; 
     if (i > 1400) { 
      $(this).delay(i).fadeIn(); 
     } 
    }) 
    .promise().done(function() { 
     console.log('debug'); 
     $(this).fadeIn(); 
    }); 

Там она есть. У вас есть представление о том, что происходит? Это абсолютно случайно, в любом браузере, насколько я тестировал. Спасибо!

---

Пожалуйста, обратите внимание: Это не происходит на Fiddle я отправил. Я знаю, что это происходит из моего собственного JS-файла, но у меня нет возможности разместить все здесь. Кроме того, это в первую очередь первое, что происходит в моей функции init.

Answer 1

Я считаю, что проблема, с которой вы сталкиваетесь, объясняется тем, что Divs динамически изменяется во время выполнения и асинхронный характер работы анимации jQuery.

Это JSFiddle объясняет то же самое. По сути, это тот же набор Divs, который вы создали изначально. Но вместо того, чтобы просто анимировать их (итерация через $ .each), я представляю еще одно заявление после $ .each, которое удалит класс, связанный с одним из Div. См. Код ниже:

$(function() { 
    $('.spin-block').each(function (index) { 
     $(this).delay(index * 200 + 800).fadeIn(1000, fnCallback(index)); 
    }); 
    //Removing class dynamically for div 5 alone. 
    $('.spin-block').eq(4).removeClass('spin-block'); 
}); 

Вы ожидаете, что это оживит все Divs, а затем removeClass с 5-го Div. Но что на самом деле происходит, начинается анимация, одновременно из «5-го уровня» удаляется класс «спин-блок», тем самым блокируя анимацию Div5!