1 답변

  • 좋아요

    0

    싫어요
    채택 취소하기

    안녕하세요 수지님 ~ ^ㅡ^ ~ 문의주신 질문에 답변드려요.

    먼저 setInterval()은 작동에 아무런 문제가 없어요. 정작 문제는 다른 곳에 있었습니다. :-)

    코드를 다음과 같이 수정하면 문제가 해결 되요. 코드를 읽어본 후 문제를 발생시킨 원인과 해결 방법에 대해 이야기 나눠봅시다.

    // -----------------------------------------------------------------------------
    // 수지님 코드
    // -----------------------------------------------------------------------------
    // var date_obj        = new Date();
    // var current_hours   = Number(date_obj.getHours());
    // var current_minutes = Number(date_obj.getMinutes());
    // var current_seconds = Number(date_obj.getSeconds());
    // -----------------------------------------------------------------------------
    
    
    // -----------------------------------------------------------------------------
    // 수정한 코드
    // : 변수를 함수로 변경
    // -----------------------------------------------------------------------------
    var currentHours   = function(){ return Number(new Date().getHours()) };
    var currentMinutes = function(){ return Number(new Date().getMinutes()) };
    var currentSeconds = function(){ return Number(new Date().getSeconds()) };
    // -----------------------------------------------------------------------------
    
    
    var hour_hand   = document.getElementsByClassName('hour-hand')[0]
    var minute_hand = document.getElementsByClassName('minute-hand')[0]
    var second_hand = document.getElementsByClassName('second-hand')[0]
    
    
    // -----------------------------------------------------------------------------
    // 수정한 코드
    // : 변수에서 함수 호출 코드로 변경
    //
    // 예) current_hours ⇒ currentHours()
    // -----------------------------------------------------------------------------
    function hourDesign() { 
       hour_hand.style.transform = 'rotate(' + 30 * currentHours() + 'deg)';
    }
    function minuteDesign() {
       minute_hand.style.transform = 'rotate(' + 6 * currentMinutes() + 'deg)';
    }
    function secondDesign() {
       second_hand.style.transform = 'rotate(' + 6 * currentSeconds() + 'deg)';
    }
    

    원인

    setInterval() 은 문제 원인이 아니었어요. timeRoad() 함수 내부에 console.log() 코드를 통해 확인해보면 정상적으로 1초마다 함수가 호출되는 것을 확인할 수 있었어요.

    이미지

    그렇다면?! 무엇이 문제 원인 일까요?

    원인은 시간을 가져오는 코드가 로딩 시 1회만 수행된다는 점이었습니다.

    시계를 만들려면 지속적으로 변경되는 시간 정보 값을 가져와야 하는데 변수에 할당된 값을 로딩 시 1회만 처리 되었으니 시간이 흘러도 값이 변경되지 않아 멈춘 것처럼 보였던 겁니다. :-)

    var date_obj = new Date();
    
    var current_hours   = Number(date_obj.getHours());
    var current_minutes = Number(date_obj.getMinutes());
    var current_seconds = Number(date_obj.getSeconds());
    

    해결책

    이 문제는 지속적으로 시간이 변경될 때마다 값을 다시 할당 받아 처리하면 됩니다. 그렇습니다! 재사용이 필요하다고 생각들거에요. 네 맞아요! 함수가 필요합니다.

    변수를 사용해 1회만 할당 받던 코드를, 호출할 때 마다 변경된 시간 정보를 반환하는 함수로 모두 변경합니다.

    var currentHours   = function(){ return Number(new Date().getHours()) };
    var currentMinutes = function(){ return Number(new Date().getMinutes()) };
    var currentSeconds = function(){ return Number(new Date().getSeconds()) };
    

    마무리로 시, 분, 초를 처리하던 함수 내부 코드에 현재 시간 정보를 가져오는 각 함수를 호출하는 코드로 변경합니다. :-)

    function hourDesign() { 
       hour_hand.style.transform = 'rotate(' + 30 * currentHours() + 'deg)';
    }
    function minuteDesign() {
       minute_hand.style.transform = 'rotate(' + 6 * currentMinutes() + 'deg)';
    }
    function secondDesign() {
       second_hand.style.transform = 'rotate(' + 6 * currentSeconds() + 'deg)';
    }
    

    짜잔!! 이제 문제가 해결되고, 시계는 초침이 움직이는 것을 확인할 수 있을 거에요~ 예! :-)

    요약

    변수에 할당된 값이 1회만 처리 되서 발생한 문제 였어요. 이 문제를 함수를 사용해 해결할 수 있었습니다. 함수의 중요성과 필요성을 다시금 느낄 수 있는 풀이 과정이었습니다. :-)

    FIN.

    • 친절하게 잘 알려주셔서 감사합니다! 김수지 2018.4.28 19:55

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.