자바 스크립트 - 이미지를 희미하게 작성한 함수에 문제가 있습니다

Question

0 불투명도의 이미지를 1로 희미하게하는 기능을 작성했습니다. 이는 불투명도를 0.1 씩 100 씩 증가시키는 것을 의미합니다. 총 지속 시간은 1 초입니다. 이 함수는 호출하고 불투명도를 증가 시키지만 간단히 100ms를 기다렸다가 불투명도를 1로 바로 설정하는 것 같습니다. 내가 잘못 가고있는 어떤 생각? . 여기에) = 코드는 내가 어떤 입력을 주셔서 감사 퇴색되어야하는 기능과 이미지에 관련 니펫

자바 스크립트입니다 :

function setOpacity(id, num) { 
    document.getElementById(id).style.opacity = num; 
} 

function imagePopUp(id){ 
    var step = 0.0; 

    for(var i = 1; i <= 10; i++){ 
     step = i/10; 
     var num = step.toFixed(1); 
     setTimeout(function(){setOpacity(id, num);}, 100); 

    } 
} 

HTML :

<div id ="shadowWrapper"> 
    <div id ="imageContainer"> 
     <img class ="sideImages" src ="images/mini_race1.jpg" onclick ="imagePopUp('image1')"></img> 
     <img class ="sideImages" src ="images/mini_race2.jpg" onclick ="imagePopUp('image2')"></img> 
     <img class ="sideImages" src ="images/mini_race3.jpg" onclick ="imagePopUp('image3')"></img> 
    </div> 

      <img class ="hiddenImages" id ="image1" src ="images/race_around_ireland_01.jpg"></img> 
      <img class ="hiddenImages" id ="image2" src ="images/race_around_ireland_02.jpg"></img> 
      <img class ="hiddenImages" id ="image3" src ="images/race_around_ireland_03.jpg"></img>  
</div> 

CSS :

#imageContainer { 
    position: absolute; 
    margin-top: 10px; 
    width: 200px; 
    height: 450px; 
    left: 600px; 
} 

.sideImages { 
    display: block; 
    width: 150px; 
    height: 112px; 
    border: 1px #94b62d solid; 
    margin-top: 20px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.hiddenImages { 
    display: block; 
    position: absolute; 
    border: 1px black solid; 
    left: 100px; 
    opacity: 0.0; 
} 

Answer 1

지금부터 100ms를 실행하기 위해 모든 콜백을 대기시킵니다. setInterval은 기능을 "스택"또는 "대기"하지 않습니다.

또한 동일한 num 변수가 생성중인 클로저에서 캡처되고 각 콜백에서 실행될 때 최종 값을 갖습니다.

두 문제에 대한 수정은

setTimeout(function(){setOpacity(id, num);}, 100); 

setTimeout(function(inum) { 
    return function(){setOpacity(id, inum);}; 
}(num), i * 100);