[Timer 구현]_setInterval, setTimeout 이용한 스케쥴링

목적

 

      Timer와 같이 일정 주기를 기준으로 계속 함수가 실행되도록 하기.

      함수가 반복 될 때 반복된 주기별로 원하는 파라미터 전송 하기

---

 

해결 방안

 

setInterval 사용 혹은 중첩 setTimeout 사용하기

% 를 사용하여 각 반복구간 구별하기

---

개념

 

setTimeout : 일정시간(지정한) 이 지난 후에 지정된 함수를 한번 실행

 param 1 : function

 param 2 : time (밀리초)

 param 3~ : param1 의 function 에 전달할 parameter 지정

 

1.기본사용

function test(){
    console.log("hi");
}

setTimeout(test,5000);

2. 파라미터 전달

function test(name){
    console.log(name+" 님 hi");
}

setTimeout(test,5000,'yoon');

3. 타이머 종료

function test(name){
    console.log(name+"님 hi");
}

let timer = setTimeout(test,5000,'yoon');

clearTimeout(timer);

 

특징 : setTimeout 의 경우 실행중인 스크립트가 전부 완료가 된 뒤에 실행됩니다.

---

setInterval: 일정시간(지정한) 간격으로 지정한 함수를 반복 실행

 param 1 : function

 param 2 : time (밀리초)

 param 3~ : param1 의 function 에 전달할 parameter 지정

 

사용법은 setTimeout 과 동일합니다.

function test(name){
    console.log(name+"님 hi");
}

let timer = setInterval(test,5000,'yoon');

clearTimeout(timer);

 

특징 : alert 와 같은 창, 혹은 spa 구현한 페이지에서 interval은 멈추지 않습니다.

타이머의 역할이 끝날 경우 꼭 지워줘야 합니다.

 

---

중첩 setTimeout : setInterval 대신에 사용할 수 있는 일정주기 반복함수

 

let timerId;

let delay = 5000;


function req() { // 5초의 타이머

    if (timerId != null) {
        clearTimeout(timerId);
        timerId = null;
    }
    timerId = setTimeout(req, delay);
}

req();

인터벌과 같은 효과를 지니고, 메모리에 저장이 된 상태에서 다시 timeout 실행시 이벤트를 지우고 새로 시작하는 함수

 

설명

 

함수를 하나 선언합니다.

해당 함수는 실행시 setTimeout 을 겁니다.

자기 자신을 호출하고 시간은 delay (5초) 를 사용합니다.

 

스크립트가 진행되면서 req() 가 실행됩니다.

실행시 만약 이전에 메모리에 TimerId가 저장되었을 경우에는 이를 초기화 해줍니다. 

그렇지 않은 평범한 경우에는 setTimeout 에서 대기하다가 스크립트가 종료되고 delay (5초) 의 시간 뒤에 다시 자신을 호출합니다.

---

중첩 setTimeout 과 % 를 사용하여 함수 구별하여 파라미터 던지기

 

let timerId;
let i = 0;
let delay = 5000;


let idx;

function req() { // 5초의 타이머

    if (i % 3 == 0) {
        idx = 'idx1';
        test(idx);
    } else if (i % 3 == 1) {
        idx = 'idx2';
        test(idx);
    } else {
        idx = 'idx3';
        test(idx);
    }

    i++;

    if (timerId != null) {
        clearTimeout(timerId);
        timerId = null;
    }
    timerId = setTimeout(req, delay);
}

req();

설명

 

우선 i = 0 ; 을 선언합니다.

 

반복이 될 때마다 i++을 사용합니다.

 

숫자는 점점 늘어나게 됩니다.

 

숫자를 나누고 나머지를 반복할 분기로 하게 될 경우

1번째의 경우 나누고 나머지 값은 0

2번째의 경우 나누고 나머지 값은 1

3번째의 경우 나누고 나머지 값은 2

 

의 반복입니다.

따라서 function 안에 if 문을 활용하여 이를 분기할 수 있습니다.

---

마무리

 

setInterval 과 중첩 setTimeout 은 비슷해 보입니다.

 

하지만 명백한 차이점이 있습니다 

 

중첩 setTimeout 의 경우에는 스크립트가 완료가 되고나서, delay 시간을 기다리고 그 뒤에 지정된 함수를 사용합니다.

setInterval 의 경우에는 만나는 즉시 함수가 실행되고, 실행되는 시점으로 delay 기다린 뒤에 다시 함수를 시작합니다.

 

만약 함수의 로딩시간이 6초이고, delay가 5초라면, 실행되기도 전에 interval이 돌게 됩니다.

보장시간이 지켜지지 않기 때문입니다.

 

중첩 setTimeout 의 경우 로딩이 된 뒤로부터 delay를 세기 때문에 로딩과 상관없이 일정 주기로 반복하려면

중첩 setTimeout 을 사용하면 됩니다.

 

그럼 중첩 setTimeout만을 사용할거 같은데요......그렇지 않습니다.

setInterval은 무조건 사용자가 정한 시간을 기준으로 반복하기 때문에

요구에 따라서 지정시간에 호출을 해야 한다면, setInterval을 사용하면 됩니다.

 

감사합니다.