함수가 한 번만 실행되는 이유 카운터 함수를 사용하여 이전 호출이 완료된 후 여러 번 함수를 실행하려고 시도했습니다.

Question

현재 jQuery (플러그인 없음)에서 페이지 전환 효과가있는 책을 작업하고 있습니다. 한 페이지 씩 차례로 클릭하는 한 페이지 회전 효과는 지금까지 문제없이 작동합니다. 하지만 이제 사용자가 선택한 콘텐츠로 바로 이동할 수 있도록 드롭 다운 선택 항목 (예 : 선택 요소)을 포함하고 싶습니다. 이 작업을 루프와 .each() 메서드로 만들려고 했으므로 선택한 내용이있는 페이지가 표시 될 때까지 turnRightPage/turnLeftPage 함수가 반복적으로 호출됩니다. 그러나 꽤 많은 시행 착오와 많은 연구 끝에 루프가 완료되었다는 점에서 loop는 turnRightPage/turnLeftPage() 함수 (각 페이지를 뒤 바꾸는 변환 함수)에 너무 빨리 반복한다고 생각합니다. 함수가 완료되기 전에 필자가해야 할 일은 함수가 실행을 끝내고 다음 반복으로 다시 시작할 때까지 루프를 일시 중지하는 방법을 찾는 것입니다. Javascript: wait for function in loop to finish executing before next iteration (이 시점에서 jfriend00 덕분에) 나는 또한 Invoking a jQuery function after .each() has completed 및 다른 사람의 사이에서 wait for each jQuery 을 읽고 비슷한 솔루션을 제안하고 여기서 나는 여기에서 제안 된 것처럼 가장 유망한 방법은, 반복 카운터와 함수를 사용하는 것입니다 생각 .

다음은 jfriend00의 콜백을 구현 한 방법입니다. 페이지 턴 수가 완료되면 "콜백 루프"를 벗어나는 return 문을 추가했습니다.

//determine whether to flip pages forward or back - first forward 
if(currentPagePos < foundPagePos){ // => turn right page 
     //determine how many times need to turn page 
     if (pageDifference > 1 && pageDifference % 2 !=0) { 
      var numPageTurns = (pageDifference-1)/2; 
      pageForward (numPageTurns); 
     } //else if ... rest omitted for brevity 
}  

function pageForward (numPageTurns){ 
     var i = 0; 
     function next(){ 
      i++; 
      if (i <= numPageTurns){ 
      turnRightPage(); 
      } else { 
       return; 
      } 
     } 
     next(); 
    }; 

전체 코드

여기에서 볼 수있다 : http://jsfiddle.net/snshjyxr/1/

이 페이지를 설정 않지만, 한 번만! 내가 뭘 놓치고 있니?

저는 아직 자바 스크립트/jQuery에 익숙하지 않으므로 문제가 너무 명백한 것처럼 보입니다. 모든 포인터가 감사하겠습니다. 고마워!

Answer 1

것은 모든 페이지 전환이 해고되었지만 한꺼번에 발생합니다. 다음 전환을 시작하려면 각 전환이 완료 될 때까지 기다려야합니다.

turnRightPage 및 turnLeftPage 함수에서 콜백 함수를 사용하십시오. turnRightPage의 예 :

function turnRightPage(callback) { 

    [...] 

    //change class AFTER transition (frm. treehouse-site) 
    $page.on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { 
     //need to double-set z-index or else secondtime turning page open setting z-index does not work (tried in Chrome 38.0.2125.111 m) 
     $page.css("z-index", turnedZindex + 1); 
     $(".turned").removeClass("turned"); 
     $page.addClass("turned"); 

     if(typeof callback == "function") { 
      callback(); 
     } 
    }); 
}; 

그리고 당신의 pageForward 기능에

은 재귀 turnRightPage을 사용 :

여기

function pageForward(numPageTurns) { 
    console.log("number of FORWARD page turns: " + numPageTurns); 

    if(numPageTurns > 0) { 
     turnRightPage(function(){ 
      pageForward(numPageTurns - 1); 
     }); 
    } 
}; 

당신의 jsfiddle 업데이트됩니다. 보시다시피 페이지가 바뀔 때마다 전환 끝에서 수신기를 추가하고 절대로 제거하지 않기 때문에 여러 페이지를 변경할 때 남아있는 버그가 있습니다. 그래서 그들은 매번 실행됩니다.

편집 :jsfiddle 성가신 마지막 버그없이 다시 업데이트되었습니다. 보시다시피 이벤트 리스너가 해고되는 즉시 바인딩을 해제하는 것이 전부였습니다.