Q1. timer라는 변수에 담아줬을 뿐인데, 왜 변수 안에 담겨진 setInterval()이 즉시 실행되는 건가요?

다시 말해서, timer();를 안 했는데도 실행되는 이유가 궁금합니다. 이 상황 너무 혼란스러워요;;;

Q2. setTimeout()을 5초로 맞춰놓으면, 마지막 "1초"가 출력이 안 되고 바로 display: none;이 발생하는데요.

아마도, setInterval()이 1초 늦게 실행되서 그러는 것같습니다.

왜 setInterval()이 setTimeout()보다 1초 늦게 실행되는 걸까요??

- 해당 코드를 바로 실행해볼 수 있게 Codepen 링크도 올리겠습니다.

https://codepen.io/uscgil0127/pen/GRQQMzB

- 질문 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div class="alert alert-danger">
      <span> 5초 이내 구매시 사은품 증정 </span>
    </div>
  </body>

  <script>
    const sp = document.querySelector("span");
    let count = 5;
    let timer = 0;

    document.addEventListener("DOMContentLoaded", function () {
      // Q1. timer 라는 변수에 할당만 해줬을 뿐인데, 왜 함수가 즉시 실행되는지 이해가 안 됩니다.
      timer = setInterval(thisThisOne, 1000);
      // Q2. setTimeout 5초로 맞춰놓으면, "1초"가 안 보이고 바로 display: none;이 되버리네요. 
      setTimeout(tryThis, 6000);
    });

    function tryThis() {
      sp.style.display = "none";
    }

    function thisThisOne() {
      
      if (count === 0) {
        clearInterval(timer);
      }
      sp.textContent = `${count}초 이내 구매시 사은품 증정`;
      count--;
    }

    // testTimer 역시 변수에 담겼을 뿐인데, 실행이 된다. 혼란스럽군요...
    let testTimer = 0;
    testTimer = setInterval(function () {
      console.log('이거 실행 됩니다.')
    }, 1000);

  </script>
</html>

인프런 커뮤니티 질문&답변

setTimeout 에 관하여 질문있습니다.

Q1. timer라는 변수에 담아줬을 뿐인데, 왜 변수 안에 담겨진 setInterval()이 즉시 실행되는 건가요?

다시 말해서, timer();를 안 했는데도 실행되는 이유가 궁금합니다. 이 상황 너무 혼란스러워요;;;

Q2. setTimeout()을 5초로 맞춰놓으면, 마지막 "1초"가 출력이 안 되고 바로 display: none;이 발생하는데요.

아마도, setInterval()이 1초 늦게 실행되서 그러는 것같습니다.

왜 setInterval()이 setTimeout()보다 1초 늦게 실행되는 걸까요??