JQuery использует каждый () как классический для каждого цикла, а не все сразу

Question

Я пытаюсь перебрать набор тегов div и постепенно выводить их из списка.Пока что, используя оператор .each (), он делает их все сразу.Как вы используете .each () в качестве более классического для каждого цикла?

Вот мой фрагмент кода JQuery, и в настоящее время он объединяет все теги div вместе, а не по одному.*

Спасибо, что рассмотрели вопрос,

Answer 1

Речь идет не об использовании .each() против простого цикла for. Проблема в том, что анимации обрабатываются через тайм-ауты (управляемые jQuery). Звонки на номера .fadeIn() и .fadeOut() немедленно возвращаются до того, как анимация произошла.

Вы можете добавить некоторую задержку к каждому fadeIn(), или вы можете структурировать свой код по-разному:

$("document").ready(function() {   
  var divs = $('.myclass'), i = 0;
  function reveal() {
    if (i === divs.length) return;
    divs.eq(i).fadeIn(4000, function() {
      divs.eq(i).fadeOut(4000, function() {
        i++;
        setTimeout(reveal, 0);
      });
    });
  }
  setTimeout(reveal, 0);
});

Answer 2

Ваша .each функция работает как положено.Что не работает, как ожидалось, так это тот факт, что Javascript по своей природе асинхронный.Он не ждет завершения showDiv перед повторным вызовом hideDiv.Затем вызовы начинают конфликтовать друг с другом.

Вместо этого вы хотите использовать интервал, который на самом деле не является частью самого jQuery, а встроен в Javascript.

Примерно так:

function showHide(theDiv) {
     if( $(theDiv).is(":visible") ) {
          $(theDiv).fadeOut(4000);
     }
     else {
          $(theDiv).fadeIn(4000);
     }
}

setInterval( function() { showHide("#theDivsID") }, 4100 );

Answer 3

Задержка использования:

var delay = 0;
$(".myclass").each(function (i) {
    var $div = $(this);
    showDiv($div);
    hideDiv($div, delay);
    delay += 100;
});


function hideDiv(theDiv, delay)
{
    $(theDiv).fadeOut(4000).delay(delay);
}