함수를 호출하는 함수를 실행하는 방법은 다음 함수를 호출하기 전에 먼저 완료했습니다. 콜백 함수 만들기

Question

다음과 같은 시나리오가 있습니다. 사용자가 이미지를 클릭하면 모든 이미지 (이미지 홀더)가 천천히 사라지고 다른 이미지가 사라진 후 3 초 후 이미지가 사라지고 그 후 이미지가 사라집니다. 다시. 내 문제는 페이더가 완료되기 전에 secondstep 기능이 이미 실행되고 있다는 것입니다. 내가 원하는 것은 페이더 기능을 가진 첫 번째 첫 번째 단계를 완료 한 후 두 번째 단계를 실행하는 것입니다. 이 콜백을 만들려고했지만 행운이 없었습니다. 내 콜백 도와주세요. 얘들 아 고마워. 신속한 응답은 높이 평가됩니다.

여기 여기 내 html로

<div id="container"> 
    <!--<img src="images/background.jpg"/>--> 
    <div id="faces_holder"> 
     <img id="face1" onclick="loadUnload(1)" src="images/face_03.png" width=350; height=656;/><img id="face2" onclick="loadUnload(2)" src="images/face_04.png" width=350; height=656;/><img id="face3" onclick="loadUnload(3)" src="images/face_05.png" width=350; height=656;/><img id="face4" onclick="loadUnload(4)" src="images/face_06.png" width=350; height=656;/><img id="face5" onclick="loadUnload(5)" src="images/face_07.png" width=350; height=656;/> 
    </div> 
    <div id="pop_face"><img id="popface_img" src=""/></div> 
</div> 

//이다 AND 것은 내 JAVASCRIPT

var id = ""; 
    var kindface=0; 
    var fadeIn; 
    var counterValue; 
    var objHolder; 


    function loadUnload(kindface){ 
     //FADEIN FADEOUT  
     function fader() { 
      if(fadeIn == true){ 
       counterValue++; 
       //setPoint = 9; 
      }else{ 
       counterValue--; // update parameters 
       //console.log("hit"); 
      } 
      objHolder.style.opacity = "0."+counterValue // show frame 
      if (counterValue == setPoint){ // check finish condition 
       clearInterval(id); 
       console.log("end fader"); 
      } 
     } 

     //FADEOUT 

입니다 // 바로이 세 번째 단계를 추가, 그래서이를 구현하기 위하여려고하고있다 방법, 이 세 번째 단계를 원합니다 // 초 단계 후 페이더 기능을 끝내고 실행 하시겠습니까? 당신의 코드에서 감사를

function thirdstep() { 
     console.log("begin second step: ") 

      fadeIn = true; 
      counterValue = 0; 
      setPoint = 9; 
      objHolder = document.getElementById("popface_img"); 
      objHolder.src = "images/"+ kindface +".png"; 

      id = setInterval(fader, 100); // draw every 100ms 
      console.log("end second step: ") 
     } 

     function secondStep() { 
      console.log("begin second step: ") 

      fadeIn = true; 
      counterValue = 0; 
      setPoint = 9; 
      objHolder = document.getElementById("popface_img"); 
      objHolder.src = "images/"+ kindface +".png"; 

      id = setInterval(fader, 100); // draw every 100ms 
      console.log("end second step: ") 
     } 

     function firstStep(callback) { 
      console.log("begin first step: ") 

      fadeIn = false; 
      objHolder = document.getElementById("faces_holder"); 
      counterValue = 10; 
      setPoint = 0; 


      id = setInterval(callback, 100); // draw every 100ms 
      console.log("end first step: ") 
      secondStep(); 

     } 


     //RUN FIRST STEP FUNCTION 
     console.log("BEGIN process ")    
      firstStep(fader); 

     console.log("END OF ALL process ") 

    } 

</script> 

Answer 1

도와주세요 :

이 secondStep 즉시이라고

> id = setInterval(callback, 100); // draw every 100ms 
> console.log("end first step: ") 
> secondStep(); 

, 그것은 완료 setInterval에 의해 설립 된 순서를 기다리지 않습니다. secondthep에서 fader으로 전화해야합니다.

function loadUnload(kindface){ 

    [...] 
    function fader() { 

     if (counterValue == setPoint){ // check finish condition 
      clearInterval(id); 
      console.log("end fader"); 

      // now call secondStep 
      secondStep(); 
     } 
    } 
    [...] 
}