다른 함수가 완료된 후에 만 ​​함수를 실행하십시오.

Question

나는이 문제에 대한 답변을 찾기 위해 웹을 샅샅이 추적 해 왔지만 찾은 모든 것이 실패한 것으로 보입니다.

함수에서 href 링크를 비활성화하고 싶습니다. 이 기능이 완료되면 (애니메이션 포함) 링크를 다시 활성화하고 싶습니다.

나는 현재 다음과 같습니다

function prev() { 
    $prevId = $('.active').prev('.slide-item').attr('id'); 
    if ($prevId) { 
     $('#prev').bind('click', false);    
     var id = '#'+$prevId; 
     $('#thumb-list li a.current').removeClass('current'); 
     var thumb = '#thumb-list li a'+id; 
     $(thumb).addClass('current'); 
     $('.active').transition({ left: offCanvas }, 300, function() { $(this).hide(); }).removeClass('active'); 
     setTimeout(function() { 
      $(id).addClass('active').css({ left: -pageWidth }).show().transition({ left: 0 }, 300).css("-webkit-transform", "translate3d(0px,0px,0px)"): 
     }, 30); 
     prevFinished(); 
    } else { 
     $('.active').css("-webkit-transform", "translate3d(0px,0px,0px)"); 
     id = '#'+$('.active').attr('id'); 
    } 
    $prevId = $(id).prev('.slide-item').attr('id'); 
    $nextId = $(id).next('.slide-item').attr('id'); 
    prevNextCheck(); 
} 

function prevFinished() { 
    $('#prev').unbind('click', false); 
} 

그러나 그것은 전혀 작동하지 않습니다.

누구든지 올바른 방향으로 나를 가리킬 수 있다면 좋을 것입니다.

피씨 나는 콜백을 사용하여 시도했지만, 내가 끔찍한 일을 잘못하지 않으면 매번 실패했다.

Answer 1

이전 답변에서 설명한 것처럼 jQuery의 지연 및 약속을 사용할 수 있습니다. 정확하게 당신이 당신의 함수는 다음과 같이 보일 것입니다 실행 싶어시기에 따라 :

var deferred = new $.Deferred(); 
var promise = deferred.promise(); 

$('.someClass').transition({ left: 0 }, 300, function(e) { 
    // .. maybe do some other stuff or maybe not 
    deferred.resolve(); 
}); 

promise.then(someFunction); 

function someFunction() { 
    // this runs after your transition has finished 
} 

당신은 물론 체인 다수의 당신은 원 수 있습니다 함께합니다.

또한 여러 함수가 끝나기를 기다려야하는 경우 $ .when을 사용하고 모든 함수가 끝날 때까지 기다릴 수 있습니다.

$.when(promise1,promise2).then(someFunction); 

Answer 2

이 작업을 수행하는 데는 몇 가지 방법이 있습니다.

해결 방법 중 하나는 콜백을 사용하는 것입니다. 애니메이션 시퀀스가 ​​지나치게 복잡 해 보이지만 여러 오브젝트에 대해 회전 애니메이션을 만들고있는 것처럼 보입니다.이 애니메이션의 요구 사항을 알지 못합니다. 하지만, 내가 말할 수있는 한 가지는 콜백이 그 모습에서 약간의 기능 만 캡슐화한다는 것입니다. 애니메이션 이후에 발생할 것으로 예상되는 모든 동작을 포함하도록 확장하십시오.

해결 방법 2는 지연된 개체를 사용하고 promises입니다. I'm not the best person to ask이 작동 방식에 대한 작동 예제가 있지만 해당 기능이 요구 사항에 맞습니다.

이 두 경로는 문서 jquery 기능으로 올바르게 배치해야합니다.