jquery에서이 루프 최적화

Question

다음 코드를 최적화해야합니다. FOR를 사용하여 시도했지만 이미지가 한 번에 모두 표시됩니다.

다음 솔루션을 사용했으나 최적화되지 않았습니다.

$(document).ready(function(){ 



function fadeInOut() { 

    var $element1 = $('a#imagem01'); 
    var $element2 = $('a#imagem02'); 
    var $element3 = $('a#imagem03'); 
    var $element4 = $('a#imagem04'); 
    var $element5 = $('a#imagem05'); 
    var $element6 = $('a#imagem06'); 



    $element1.fadeIn(2000, function() { 
    $element1.fadeOut(2000, function() { 

    $element2.fadeIn(2000, function() { 
    $element2.fadeOut(2000, function() { 


    $element3.fadeIn(2000, function() { 
    $element3.fadeOut(2000, function() { 


    $element4.fadeIn(2000, function() { 
    $element4.fadeOut(2000, function() { 

    $element5.fadeIn(2000, function() { 
    $element5.fadeOut(2000, function() { 

    $element6.fadeIn(2000, function() { 
    $element6.fadeOut(2000, function() { 

    fadeInOut(); 

    });});});});});});});});});});});}); 

    } 

    fadeInOut(); 

}); 

제발 도와주세요!

Answer 1

$(document).ready(function() { 
    $("div").hide(); 
    var obj = [$("#o1"), $("#o2"), $("#o3"), $("#o4"), $("#o5")]; 
    var i = 0; 
    var interval = setInterval(function() { 
      obj[i].fadeIn(2000); 
      obj[i].fadeOut(2000); 
      i++; 
      if (i > 4) { 
       clearInterval(interval) 
      } 
     }, 
     4000 
    ); 
}); 

나는이 솔루션은 위의 더 확신하지만, this would work too ..

Answer 2

function fadeInOut() { 
    var elements = ['a#imagem01', 'a#imagem02', 'a#imagem03', 'a#imagem04', 'a#imagem05', 'a#imagem06']; 
    var index = 0; 
    var loopForever = false; 

    (function() { 
     var selfFunction = arguments.callee; 
     if((loopForever) && (index > elements.length-1)) index = 0; 

     if(index <= elements.length-1) { 
      $(elements[index++]).fadeIn(2000, function() { 
       $(this).fadeOut(2000, selfFunction); 
      }); 
     } 
    })(); 
} 

테스트되지 않았지만이 줄에있는 것이 트릭을 수행해야합니다. 기본적으로 모든 요소를 ​​반복하는 콜백 루프입니다.