如何運行調用函數的函數在調用下一個函數之前完成它。創建回調函數

Question

這裏是情景：當用戶點擊任何圖像時，所有圖像（images_holder）都會逐漸淡出，然後在其他圖像淡入之後，3秒後圖像淡出，圖像淡出images_holder淡出再次。我的問題是，在推子完成之前，秒步功能已經運行。我想要的是完成第一步與推子功能完成後，第二步將運行。試圖創建這個回調，但沒有運氣。請幫我回撥。謝謝你們。快速反應是高度讚賞。

這裏是我的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> 

//這裏是我的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

在您的代碼：

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

secondStep立即調用，它不會等待通過setInterval建立完成序列。您需要撥打secondStep從推子，例如，

function loadUnload(kindface){ 

    [...] 
    function fader() { 

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

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