JavaScript 타이밍 제어하기

JavaScript 타이밍 제어하기

안녕하세요 TriplexLab 입니다.
JavaScript 타이밍 제어하는 메서드에 관해서 살펴보겠습니다.

🎯 JavaScript 타이밍 종류

속성	설명
setTimeout	설정 해놓은 Time 이 지나고 난후에 실행한다.
clearTimeout	clearTimeout는 setTimeout을 취소 시킬수 있다.
setInterval	설정 해놓은 Time 동안 계속 반복한다.
clearInterval	clearTimeout는 setInterval을 취소 시킬수 있다.
requestAnimationFrame	requestAnimationFrame는 setInterval를 보안한 것이다.
cancelAnimationFrame	cancelAnimationFrame는 requestAnimationFrame 을 취소 시킬수 있다.

 

✍️ setTimeout 예시)

<script>    
    $(function(){
        let timeId;
        function sample() {
            console.log('sample!');
        }

        //setTimeout timeing 반복에대한 메서드 setTimeout(함수, MS 1/1000초); 1)뒤에서 정한 Time 이 지나고 난후에 실행한다.
        debugger;
        timeId = setTimeout(sample, 3000);  // setTimeout(sample, 3000) 이 리턴해주고 있는 숫자값을 변수에 저장한다.
            console.log(timeId);    
        
        $('.btn').on('click', function(){
             //clearTimeout는 setTimeout을 취소 시킬수 있다.
            clearTimeout(timeId);  //setTimeout(sample, 3000)에서 반환해주고 있는 숫자를 timeId 이곳에 저장 한 값을 이용해서 setTimeout 취소시킬수 있다.
        });
    });
</script>

 

✍️ setInterval 예시)

<script>
$(function(){
    let timeId;
    function sample() {
        console.log('sample!');
    }

//setInterval timeing 반복에대한 메서드 setInterval(함수, MS 1/1000초);    1)뒤에서 정한 Time 동안 계속 반복한다.
timeId = setInterval(sample, 1000/60); // setInterval(sample, 1000/60) 이 리턴해주고 있는 숫자값을 변수에 저장한다.
console.log(timeId);
    $('.btn').on('click', function(){
        //clearTimeout는 setInterval을 취소 시킬수 있다.
        clearInterval(timeId); // setInterval(sample, 1000/60)에서 반환해주고 있는 숫자를 timeId 이곳에 저장 한 값을 이용해서 setInterval 취소시킬수 있다.
    });
});
</script>

 

✍️ requestAnimationFrame 예시)

<script>
$(function(){
    let timeId;
    let n = 0;

const sample = function() {
    n++; //1씩 증가 시킨다.
    console.log(n);
        if(n > 200){ //이렇게 조건을 사용해서 반복하는 범위도 설정을 해줄수 있다.
        return;
    }
    console.log('sample!');
    //requestAnimationFramesms 기본적으로 한번만 실행을 하는데. 함수안에서 sample함수를 또 호출하고 있다.(재귀함수) 그래서 계속 반복이 된다. 60분에 1초 목표로
    timeId = requestAnimationFrame(sample);   // requestAnimationFrame(sample) 이 리턴해주고 있는 숫자값을 변수에 저장한다.
}
    sample()

    $('.btn').on('click', function(){
        cancelAnimationFrame(timeId);    //requestAnimationFrame에서 반환해주고 있는 숫자를 timeId 이곳에 저장 한 값을 이용해서 cancelAnimationFrame 취소시킬수 있다.
    });
});
</script>