타이머 함수 소개 - setInterval()

일정한 시간마다 특정 구문을 실행하고자 할 때 사용하는 기능

- 이미지 슬라이더에서 일정 시간마다 이미지가 자동으로 슬라이드 되는 기능

- 롤링 배너에서 일정 시간마다 배너를 변경할 때

- 일정 시간마다 자동으로 변경되는 실시간 검색어

- 게임에서 플레이 시간을 나타낼 때

 

주요기능

setInterval() : 일정 시간마다 주기적으로 특정 구문을 실행하는 기능

setTimeout() : 일정 시간이 지난 후 특정 구문을 딱 한번 실행하는 기능

clearInterval() : 실행 중인 타이머 함수를 먼추는 기능

 

타이머 함수는 모두 전역 객체인 window에 들어있다. 즉 window.setInterval()과 setInterval()은 동일하다

 

01 일정시간마다 특정 구문을 실행하는 타이머 만들기

var timerID = setInterval(func, duration);

매개변수

func : 지연 시간마다 타이머 함수에 의해 호출되는 일종의 콜백함수

duration : 지연시간, 단위는 밀리초

 

리턴값

생성된 타이머 id 실행한 타이머 함수를 멈출 때 사용

 

예제) 1초에 한번씩 변수값을 1씩 증가시키고 이 값을 #output 영역에 출력

 

- 익명함수

    <script>

        $(document).ready(function () {

            var $output = $("#output");
            var count = 0;
			setInterval( function() {
            	count++;
                $oupput.text(count);
            }, 1000)
            

        })

    </script>

setInterval()함수구문후 익명함수를 넣어준다.

두번째매개변수에 1000(1초)를 넣어준다.

 

- 일반함수

    <script>

        $(document).ready(function () {

            var $output = $("#output");
            var count = 0;

            // 함수 생성
            function addCount() {
                // 값 증가
                count++;
                // 값을 출력
                $output.text(count);
            }

            setInterval(addCount, 1000)
        })

    </script>

addCount()라는 일반함수를 생성하고 setInterval()에 연결해서 사용한다.

 

 

만약 이번 미션에서 시작하자마자 count 변수의 값을 1 증가시킨후 #output에 출력해야 한다면

다음과 같이 중복코드가 발생한다

 

-중복코드

    <script>
        $(document).ready(function () {

            var $output = $("#output");
            var count = 0;

            // 값 증가
            count++;
            // 값을 출력
            $output.text(count);
            setInterval(function () {
                // 값 증가
                count++;
                // 값을 출력
                $output.text(count);
            }, 1000);

        })

    </script>

 

-중복코드제거

    <script>

        $(document).ready(function () {

            var $output = $("#output");
            var count = 0;

            // 함수 생성
            function addCount() {
                // 값 증가
                count++;
                // 값을 출력
                $output.text(count);
            }

            addCount();
            setInterval(addCount, 1000);

        })

    </script>

이렇게 addcount 일반함수를 생성하고 addCount함수를 먼저 불러온 후에

setInterval를 불러오면 된다.