기초공사 (html,css,javascript)

과제-타이머 만들기- 안되는 이유-코드로.-해결 본문

academy/JavaScript

과제-타이머 만들기- 안되는 이유-코드로.-해결

에스프레소라떼 2024. 5. 13. 20:06

//

https://developer.mozilla.org/ko/docs/Web/API/setInterval

 

setInterval() - Web API | MDN

Window 및 Worker 인터페이스에서 제공되는 setInterval() 메서드는 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행합니다.

developer.mozilla.org

구조.

const intervalID = setInterval(myCallback, 500, "Parameter 1", "Parameter 2");

function myCallback(a, b) {
  // 여기에 코드를 작성하세요
  // 매개변수는 순전히 선택적입니다.
  console.log(a);
  console.log(b);
}

 

 

 

이코드는 왜 안될까? 문제점을 파악해서 내가 무엇이 잘 안되는지 알려고 초점을 맞췄다.

그래서 더 오래걸리는 것일까.;;

 

해결은 되었지만, 오류가 있었떤 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 시작을 누르면 1초마다 숫자가 1씩 증가 -->
    <!--시작버튼만들고, setInterval -->
    <button class="play">시작</button>
    <button class="stop">중지</button>
    <button class="reset">초기화</button>

    <!-- 얘가 없으니 NaN으로 나온다. -->
    <div class="here">0</div>

    <script>
      const $playBtn = document.querySelector(".play");
      const $displayarea = document.querySelector(".here");
      const $stopBtn = document.querySelector(".stop");
      const $resetBtn = document.querySelector(".reset");
      const count = parseInt($displayarea.innerText);

      //1.play버튼 클릭

      let timer;

      // 실행하는 함수를 만든다.
      // current부분 화면에 보여줘야하기 때문에 함수에 넣자!
      function clock() {
        let current = new Date();
        const hrs = current.getHours();
        const mins = current.getMinutes();
        const secs = current.getSeconds();
        console.log(current);

        $displayarea.innerText = `현재시간은 : ${hrs}시 ${mins}분 ${secs}초`;
      }

      // 1초마다 clock() 함수 실행시킨다.
      /*
      timer = setInterval(clock,1000,`현재시간은 ${$displayarea.innerText}입니다.`
      );
      // console.log(timer);
      */

      // 중지하는 함수를 만든다.
      // function stop() {
      //   clearInterval(timer);
      // } 아래코드로 화살표함수로 바꿔보자.

      const stop = () => clearInterval(timer);

      // 초기화 함수를 만든다.
      function reset() {
        $displayarea.innerText = "0시 0분 0초";
      }

      //2. play
      $playBtn.addEventListener("click", () => {
        clock(),
          (timer = setInterval(
            clock,
            1000,
            `현재시간은 ${$displayarea.innerText}입니다.`
          ));
      });

      //3.stop
      $stopBtn.addEventListener("click", stop);

      // 4.reset
      $resetBtn.addEventListener("click", reset);
    </script>
  </body>
</html>

 

 

1. error 01

 timer = setInterval( clock, 1000,`현재시간은 ${$displayarea.innerText}입니다.`
);

여기에서 흐름을 보면  $playbtn이 누르기도 전에 timer는 업데이트가 되고있다.(1초마다 숫자가 변한다.)

즉,

코드에서 setInterval은 스크립트가 로드될떄 즉시 실행되도록 설정되어 있다.
이렇게 하면 사용자가 'play'버튼을 클릭하기도 전에 시간이 업데이트 된다.

 

그래서 이 코드를 

$playbtn 클릭이벤트안에 넣어주거나, 따로 플레이함수안에 넣어줘서 클릭이벤트안에 이 함수를 호출하면 된다.

나는 전자를 통해 수정을 하겠다.

 

2. clock함수 내에서 new Date( ). toString( ) 사용:

clock함수 내에서 new Date( ).toString( ) 사용:
함수에서 이미 current 변수를 통해 현재 시간을 가져오고 있으니, 이를 활용하여 보다
명혹한 시간 포맷을 제공하는 것이 좋다.
newDate( ).toString( ) 대신 

$displayarea.innerText = `현재시간은 : ${hrs}시 ${mins}분 ${secs}초`;

 

다른 버전으로 오류없이 결론 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 시작을 누르면 1초마다 숫자가 1씩 증가 -->
    <!--시작버튼만들고, setInterval -->
    <button class="play">시작</button>
    <button class="stop">중지</button>
    <button class="reset">초기화</button>

    <!-- 얘가 없으니 NaN으로 나온다. -->
    <div class="here">0</div>
  </body>

  <script>
    const $playBtn = document.querySelector(".play");
    const $displayarea = document.querySelector(".here");
    const $stopBtn = document.querySelector(".stop");
    const $resetBtn = document.querySelector(".reset");
    const count = parseInt($displayarea.innerText);

    let timer;
    //시간,분,초를 만드는 함수를 한다.
    function clock() {
      let current = new Date();
      const hrs = current.getHours();
      const mins = current.getMinutes();
      const secs = current.getSeconds();

      $displayarea.innerText = `${hrs}시 ${mins}분 ${secs}초`;
    }

    // 중지하는 함수를 만든다.
    function stop() {
      clearInterval(timer);
    }

    //초기화하는 함수를 만든다.
    function reset() {
      clearInterval(timer);
      $displayarea.innerText = "0시 0분 0초";
    }

    //
    $playBtn.addEventListener("click", function () {
      clock();
      timer = setInterval(clock, 1000); // 1초마다 계속 업데이트
    });

    $stopBtn.addEventListener("click", stop);

    //초기화
    $resetBtn.addEventListener("click", reset);
  </script>
</html>

 

저작자표시

'academy > JavaScript' 카테고리의 다른 글

책 - 함수형코딩  (0) 2024.05.18
childrenNodes / children  (0) 2024.05.14
axios cdn 다운로드- 설치  (0) 2024.05.12
수업 0512 - 프론트엔드, 백엔드 요청응답  (0) 2024.05.12
오픈API  (0) 2024.05.12
'academy/JavaScript' Related Articles more