jQuery .each ()의 각 반복 사이에 일시 중지를 추가하는 방법은 무엇입니까?

jQuery .each ()의 각 반복 사이에 일시 중지를 추가하는 방법은 무엇입니까?

---

jQuery 배열의 배열을 .each ()를 통해 배열에서 각 인화를 수정합니다.

이 경우 CSS 전환을 활용하기 위해 -webkit-transition-property를 트리거하도록 클래스 이름을 업데이트했습니다.

각 CSS 전환이 시작되기 전에 잠시 중단됩니다. 다음을 사용하고 업데이트 할 사이에 지연이 없습니다. 대신, 모두 한꺼번에 업데이트되는 것처럼 보입니다.

function positionCards() {
  $cards = $('#gameboard .card');
  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, 500 )
  });
}

function addPositioningClasses($card){
  $card
    .addClass('position')
}

나는 setTimeout이 해결하기를 바라고 있었지만 작동하지 않는 것입니다. 각 수업의 각 클래스 이름 업데이트 중지를 수행하는 방법이 일시 중지 되었습니까?

---

나는 주장 할 수있는 것입니다.

function positionCards() {
  var $cards = $('#gameboard .card');

  var time = 500;

  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, time)
      time += 500;
  });
}

---

오래된 행사를 찾아서 미안하지만 팁은 있지만 문제에 유용 할 수 있습니다.

$cards.each(function(index) {
    $(this).delay(500*index).addClass('position');
});

---

500ms마다 자신을 호출하는 메서드를 만들면 그 트릭을 수행해야합니다. 다음 코드가 작동합니다.

var __OBJECTS = [];

$('#gameboard .card').each(function() {
    __OBJECTS.push($(this));
});

addPositioningClasses();

function addPositioningClasses() {
    var $card = __OBJECTS.pop();
    $card.addClass('position');
    if (__OBJECTS.length) {
        setTimeout(addPositioningClasses, 500)
    }
}

바이올린 테스트 : http://jsfiddle.net/jomanlk/haGfU/

---

방법에 대한 .delay () ?

또는

function addPositioningClasses($card){
  setTimeout(function() { $card.addClass('position')}, 1000);
}

---

Safari / iOS 만 대상으로하는 경우 애니메이션 시퀀스의 정확한 타이밍을 제어하는 ​​것이 얼마나 중요한지에 따라 JS 시간 초과와 관련된 솔루션을 피해야합니다. 특히 백그라운드에서 많은 작업이 진행되는 느린 프로세서 또는 시스템에서 애니메이션이 시간 초과 지연과 완료 보장은 없습니다. 최신 버전의 웹 사이트 (모바일 사파리 포함)에서는 @-webkit-keyframes. Webkit.org에는 이에 대한 멋진 소개가 있습니다 . 실제로 구현하기가 매우 뛰어납니다.

---

이것을 시도하십시오 :

function positionCards() {
  $('#gameboard .card').each(function() {
      $(this).delay(500).addClass('position');
  });
}

솔직히 말해서 ... 과거에 $ (this) .delay ()가 어떤 경우에는 오작동했고 다른 경우에는 완벽하게 작동했습니다. 그러나 이것은 일반적으로 DOM 속성 조작이 아닌 jQuery 애니메이션 호출과 함께 사용되었습니다.

.delay ()는 setTimeout과 같은 방식으로 작동하지 않습니다. 자세한 내용 은 jQuery .delay () 문서를 참조하십시오 .

내가 아는 한 $ (). each는 절차 적으로 실행되므로 호출의 다음 반복은 선행 작업이 완료된 후에 만 ​​시작되어야합니다.

---

이것을 확인하십시오, 나를 위해 잘 작동했습니다! :)

jQuery('.optiresultsul li').each(function(index) {
    jQuery(this).delay(500*index).animate({ opacity: 1 }, 500,function(){
        jQuery(this).addClass('bgchecked');
    });
});

---

이 코드는 초기 지연을 50ms로 추가합니다. 그런 다음 ".row"클래스를 통한 각 루프에 대해 추가로 200ms 지연이 추가됩니다. 이것은 각 행에 대해 멋진 지연된 쇼 효과를 만듭니다.

$( document ).ready(function() {
    // set inital delay
    var dtotal = 50;
    $(".row").each(function() {
    //add delay to function
      $(this).delay(dtotal).show();
    //add 200ms to delay for each loop
      dtotal = dtotal + 200;
    });
});

참고 URL : https://stackoverflow.com/questions/5202403/how-to-add-pause-between-each-iteration-of-jquery-each