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

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

저는 jQuery 객체의 배열을 잡고 배열 내의 각각의 jQuery를 .each()를 통해 수정하고 있습니다.

이 경우 클래스 이름을 업데이트하여 -webkit-transition-property를 트리거하여 CSS 전환을 활용합니다.

각 CSS 전환이 시작되기 전에 잠시 멈추었으면 합니다.저는 다음을 사용하고 있지만, 각 업데이트 사이에 지연이 없습니다.대신, 모두 한 번에 업데이트되는 것으로 나타납니다.

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

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

set Timeout이 해결해주길 바랬는데 잘 안 되는 것 같습니다.각 개체의 각 CLASS 이름 업데이트 전에 일시 중지를 수행할 수 있는 방법이 있습니까?

저는 이것을 논평으로 추가했지만, 이제 제가 올바르게 읽고 제 질문에 답했기 때문에 이것은 아마도 효과가 있을 것입니다.

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

fiddle에서 테스트됨: http://jsfiddle.net/jomanlk/haGfU/

.delay()는 어떻습니까?

또는

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

Safari/iOS만을 대상으로 하는 경우 애니메이션 시퀀스의 정확한 타이밍을 제어하는 것이 얼마나 중요한지에 따라 JS 타임아웃과 관련된 모든 솔루션을 피해야 합니다.애니메이션이 시간 초과 지연과 동시에 완료된다는 보장은 없습니다. 특히 백그라운드에서 많은 작업이 진행되는 느린 프로세서나 기계에서 그렇습니다.최신 버전의 웹킷(모바일 사파리 포함)은 다음을 통해 시간이 지정된 애니메이션 시퀀스를 허용합니다.@-webkit-keyframesWebkit.org 은 그것에 대한 좋은 소개를 가지고 있습니다.실제로 구현하기가 꽤 쉽습니다.

시도해 보십시오.

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

솔직히 말해서...저는 $(이것)를 먹었습니다.특정한 경우에는 지연 또는 과거의 잘못된 행동을 하고 다른 경우에는 완벽하게 작동합니다.그러나 이는 일반적으로 DOM 속성 조작이 아닌 jQuery 애니메이션 호출과 관련이 있습니다.

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

제가 알기로는 $(.).각각 절차적으로 실행되므로 다음 통화 반복은 이전 통화가 완료된 후에만 시작됩니다.

이것 좀 봐요, 저한테 잘 됐어요! :)

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