Interval, Timeout 함수

1. setTimeout()

일정 시간이 지난 후 매개변수로 제공된 함수를 실행

    const 상수명 = function(){
        실행문;
    }

    const st = setTimeout(상수명, 밀리초);

2. clearTimeout()

일정 시간 후에 일어날 setTimeout()을 취소함

        const hello = function(){
            console.log('hello')
        }

        const st = setTimeout(hello,5000);
        clearTimeout(st);

3. setInterval()

일정 시간마다 매개변수로 제공된 함수를 실행

        const hello = function() {
            console.log('안녕하세요.JavaScript')
        }

        const si = setInterval(hello, 3000)

4. clearInterval()

일정 시간마다 일어날 setInterval()을 취소함

문제. 현재 시간을 출력하는 문서를 만들어보자.
(단, 시작 버튼을 누르면 콘솔에 현재 시간을 초마다 출력하고, 중지 버튼을 누르면 시간이 정지됨, 다시 시작을 누르면 시간이 다시 출력됨)

    <button onclick="startClock()">시작</button>
    <button onclick="stopClock()">중지</button>

    <script>
        let si
        function makeClock(){
            const date = new Date()
            yy = date.getFullYear()
            MM = date.getMonth()+1
            dd = date.getDate()
            hh = date.getHours()
            mm = date.getMinutes()
            ss = date.getSeconds()
            console.log(`${yy}-${MM}-${dd}-${hh}-${mm}-${ss}`)
        }

        function startClock() {
            si = setInterval(makeClock, 1000)
        }

        function stopClock() {
            clearInterval(si)
            console.log('종료!')
        }
    </script>

✔️ si라는 전역 변수를 사용한 이유는 setInterval 및 clearInterval 함수가 서로 다른 함수에서 접근할 수 있도록 동일한 변수를 공유하기 위함입니다. setInterval 및 clearInterval 함수가 서로 다른 함수에서 호출되므로 이들 간에 데이터를 공유하려면 전역 변수를 사용해야 합니다. si 변수는 이러한 데이터 공유를 허용합니다.