[Javascript] 구동을 지연시키자 - setTimeout, setInterval

일정시간이 지난 후 코드를 실행시키는걸 호출 스케줄링이라고 한다. 

두가지 명령어로 스케줄링이 가능하다.

setTimeout : 일정시간이 지난 후 코드를 실행시킴

setInterval : 일정시간 간격을 두고 코드를 실행시킴

이런 차이로 setTimeout은 주로 단회성 코드에, setInterval은 반복되는 코드에 지연이 필요할 때 사용된다. 

문법은;

setTimeout(callback function, duration)

setInterval(callback function, interval duration) 

으로 작성된다. 

duration에 들어가는 숫자는 밀리초(1/1000초)이다. setTimeout은 해당 시간 이후 callback function이 실행되고

setInterval은 callback function이 연속되는데, 그 사이마다 해당 시간의 지연을 가진다. 

재밌는건 setTimeout은 clearTimeout(setTimeout(f, ms))의 명령어로 지연시간 중 코드 실행을 취소 시킬 수 있고

setInterval은 clearInterval(setInterval(f, ms))의 명령어로 코드 실행을 취소 시킬 수 있다.

 

먼저 setTimeout과 clearTimeout을 활용해보자.

<button type="button" id="start">start</button>
<button type="button" id="finish">finish</button>
<h1 id="print"></h1>

지연 프린트를 해줄 함수를 시작할 버튼과 코드 실행을 취소시킬 버튼, 그리고 출력자리를 간단하게 잡아놓고

let timeObj;
document.getElementById("start").onclick = () => {
    timeObj = setTimeout(myFunction, 2000);
};
function myFunction() {
    document.getElementById("print").innerText = "This is printed after 2 seconds!";
}
document.getElementById("finish").onclick = function () {
    clearTimeout(timeObj);
};

시작 버튼이 눌리고 2초 후에 구문이 출력되도록 함수 설정했다.

코드 실행을 취소할 함수도 작성하여 finish 버튼에 물렸다.

 

이번엔 setInterval과 clearInterval을 활용해보자.

<button type="button" id="start">start</button>
<button type="button" id="finish">finish</button>

버튼 두개를 만들었다. 

let intervalObj;
function changeColor() {
    intervalObj = setInterval(flashColor, 300);
}
function flashColor() {
    let elem = document.getElementById("start");
    elem.style.color = elem.style.color == "white" ? "red" : "white";
    elem.style.backgroundColor = elem.style.backgroundColor == "red" ? "yellow" : "red";
}
function stopFlashColor() {
    clearInterval(intervalObj);
}
document.getElementById("start").addEventListener("click", changeColor);
document.getElementById("finish").addEventListener("click", stopFlashColor);

flashColor라는 함수를 300밀리초(0.3초) 마다 실행하는 함수를 만들었다.

flashColor 함수는 요소의 색(css의 색속성이므로 기본적으로 글자색을 의미한다)이 흰색이라면 빨갛게, 아니라면 하얗게 만들어주고 요소의 배경색이 빨간색이라면 노랗게, 아니라면 빨갛게 만들어준다.

stopFlahsColor는 setInterval 함수를 정지시킨다.

이제 버튼 두개에 각각 setInterval을 품은 함수와 clearInterval을 품은 함수를 물려준다. 

 

결과는 아래와 같다.