9. 다양한 함수/메소드

  setInterval()

setInterval 함수는 주기적으로 실행문을 일정한 시간 간격을 두고 반복한다.

즉 매개변수로 주어진 시간 간격으로 무한히 반복 호출한다.

 

구조)

    setInterval( function(){}, millisecond );

    => n초마다 function() 내용을 실행하겠다.

 

  setTimeout()

setTimeout 함수는 일정 시간 후 실행되도록 처리한다.

따라서 setInterval 함수와는 달리  매개변수로 주어진 시간 후 딱 한번만 콜백 함수를 호출한다.

 

구조)

    setTimeout( function(){}, millisecond );

    => n초 후 function() 내용을 한번 실행하겠다.

  clearInterval()과 clearTimeout()

cleaInterval/clearTimeout 함수는 setInterval/setTimeout 함수를 취소하는 역할이다.

결과상 문제는 없으나 명확성과 혼란 방지를 위해 clealInterval - setInterval, clearTimeout - setTimeout끼리 사용해주는 것을 권장한다.

 

구조)

    clearInterval( function ); / clearTimeoutl( function );

  Timer 예제

<script>
    var interval = document.getElementById("interval");
    var stop = document.getElementById("stop");
    var setTime = document.getElementById("setTime");
    var result = document.getElementById("result");

    var myTime;
    var x = 0;

    // 시작 버튼 눌렀을 때
    interval.addEventListener("click",function(){

        // 시작버튼을 여러번 누를 경우 발생하는 오류방지
        clearInterval(myTime);

        myTime = setInterval(function(){
            x++;
            result.innerHTML = x;
        }, 1000);
    });

    // 정지 버튼을 눌렀을 때
    stop.addEventListener("click",function(){
        // 일시정지
        clearInterval(myTime);

        // 초기화
        x = 0;
        result.innerHTML = x;
    });

    // 3초후 버튼을 눌렀을 때
    setTime.addEventListener("click", function(){
        setTimeout(function(){
            alert('3초가 지났습니다.');
        }, 3000);
    });
</script>

  Date 객체 메소드

• 연도 : getFullYear()
• 월 : getMonth() = 1년 몇 월
• 일 : getDate() = 1달 중 몇 번째 일 / getDay() = 1주 중 몇 번째 일(일요일: 0, 토요일: 6)
• 시 : getHours() = 0~23(24주기)
• 분 : getMinutes() = 0~59
• 초 : getSeconds() = 0~59
• 밀리초 : getMilliseconds() = 0~999

  부드러운 영역 이동

1. window.scrollTo

• window.scrollTo(xpos, ypos)
• window.scrollTo({top:x, left:y, behavior:"이동 시 효과"})

       behavior의 속성값 = auto(기본값, 내부 설정) / smooth(부드럽게 이동)

 

2. offset: 요소의 위치 정보

• 요소객체.offsetWidth : 요소의 너비
• 요소객체.offsetHeight : 요소의 높이
• 요소객체.offsetLeft : 요소의 왼쪽으로부터 얼마나 떨어져 있는지
• 요소객체.offsetTop : 요소가 위로부터 얼마나 떨어져 있는지

* 무한 스크롤 페이지 만들기 : onscroll = 스크롤 이벤트를 처리하는 속성.