id에 따라 여러 div에 동일한 함수 사용

Question

일부 div, 2 초마다 작동하는 함수가 있습니다. 동일한 메소드를 호출하지만 다른 div를주고 효과를 내기 위해 1 초 정도 기다리고 싶습니다. 문제는 다음과 같습니다. 그 두 번째를 기다리는 방법 (현재 2 초마다 모든 div가 효과를 실행하고 1 초 행에서 실행하고 싶습니다).

$(function() { 
    index = 0; 
    window.setInterval(function() { 
     if (index > 10){ 
      index = 0; 
     }  
     myFunction("so1", "flipping-right"); 
     //setTimeout(funcx, 1000); 
     myFunction("so2", "flipping-left");   
     //setTimeout(funcx, 1000); 
     myFunction("so3", "flipping-top"); 
     //setTimeout(funcx, 1000); 
     myFunction("so4", "flipping-bottom"); 
     //setTimeout(funcx, 1000); 
     myFunction("so5", "flipping-right"); 

     i++; 
    }, 2000); 
}); 




myFunction = function (id, effect) { 
    $('#' + id).toggleClass(effect); 
} 

당신은 거의 오른쪽 문제는 함수 호출이 있고 함수 자체를 전달할 필요가있다 얻었다 at my code

Answer 1

모습을주십시오. setTimeout은 함수 매개 변수를 받아들이므로 함수를 전달해야합니다.

시도

setTimeout(function(){ 
    myFunction("so1", "flipping-right"); 
    myFunction("so2", "flipping-left");   
    myFunction("so3", "flipping-top"); 
    myFunction("so4", "flipping-bottom"); 
    myFunction("so5", "flipping-right"); 
}, 1000); 

당신이 여기

setTimeout(function(){ 
     myFunction("so1", "flipping-right"); 
}, 1000); 
setTimeout(function(){ 
     myFunction("so2", "flipping-left"); 
}, 2000); 
setTimeout(function(){ 
     myFunction("so1", "flipping-right"); 
}, 3000); 
setTimeout(function(){ 
     myFunction("so3", "flipping-top"); 
}, 4000); 
setTimeout(function(){ 
     myFunction("so5", "flipping-right"); 
}, 5000); 

같은 뭔가를 할 수 the fiddle updated 두 번째 동작을 가정하는 다른 후 그들에게 하나를 실행하려는 경우 무엇을이다 ((가) setInterval 내부) 너는 원했어.

Answer 2

나는 당신이 루프에 생기를 원하는 경우 잘 모르겠지만, 어느 쪽이든, 당신은 대신 setTimeout를 사용하고 체인의 각 요소를 호출해야합니다 : 내가 제안 무엇

myFunction = function (id, effect) { 
    var $elem = $('#' + id); 

    if ($elem.length) { 
     setTimeout(function() { 
      $elem.toggle(effect); 
      myFunction(nextID, nextFlippint); 
     }, 2000); 
    } 
} 

이 효과를 저장하는 것입니다 왜냐하면 다른 종류의 계산 가능한 순서가없는 것처럼 보이기 때문입니다. nextID에 대해서는 .next() 요소를 대신 사용하거나 현재 ID에 1을 추가 할 수 있습니다. 이 루프를 반복하려면 $elem.length이 0이면 id를 1로 재설정하십시오. 당신은 단지 기능 요소 사이의 지연을 통과 할 수있는 타이밍 시퀀스 중 좀 더 컨트롤을 원하는 경우

Answer 3

$(function() { 
index = 0; 
var datas = [ 
["so1", "flipping-right"], 
["so2", "flipping-left"], 
["so3", "flipping-top"], 
["so4", "flipping-bottom"], 
["so5", "flipping-right"] 
]; 
// 2sec to start animate 
setTimeout(function () { 
    // 1sec loop 
    window.setInterval(function() { 
     if (index > 10){ 
      index = 0; 
     }  
     myFunction(data[i][0], data[i][1]); 
     i++; 
    }, 1000); 
},2000) 
}); 

myFunction = function (id, effect) { 
    $('#' + id).toggleClass(effect); 
} 

이

Answer 4

처럼 보일 수 있습니다. 이 방법을 사용하면 세트의 반복 사이의 타이밍을 미세 조정할 수 있습니다.

myFunction = function ($flip, delay) { 
    setTimeout(function(){ 
     var effect = "flipping-" + $flip.attr('data-direction'); 
     $flip.toggleClass(effect); 
    },delay); 
} 

$(function() { 
    var timer = 0; 
    $("[data-direction]").each(function(){ 
     myFunction($(this),timer); 
     timer += 1000; 
    }); 
});