intervals, timeout

intervals

정해놓은 시간마다 함수를 실행한다.

WindowOrWorkerGlobalScope.setInterval() - Web APIs | MDN

var intervalID = setInterval(func, [delay, arg1, arg2, ...]);
var intervalID = setInterval(function[, delay]);

fun(function) - 매 밀리초마다 실행되는 함수.

delay(optional) - 함수가 실행되는 지연 시간으로 밀리초(1000분의 1초)단위 설정.

arg(optional) - 타이머가 만료되면 func에 의해 지정된 함수에 전달되는 추가 인수.

 

기본 구문 예제)

var intervalID = setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');

function myCallback(a, b)
{
 // Your code here
 // Parameters are purely optional.
 console.log(a);
 console.log(b);
}

예제2)

See the Pen by jongha (@gajong) on CodePen.

 

timeout

타이머가 만료된 뒤 함수나 지정된 코드를 실행하는 타이머를 설정.

WindowTimers.setTimeout() - Web API | MDN

var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]);

window.setTimeout(function, milliseconds);

func - function이 타이머가 만료된 뒤 실행.

delay(optional) - 타이머가 지정된 함수나 코드를 실행시키기 전에 기다려야할 ms(1000분의 1초) 단위의 시간. 생략하면, 0

param - 타이머가 만료되고 func에 전달되는 추가적인 매개변수.

 

예제)

일정 시간이 흐른 뒤에 호출하기

const clock = document.querySelector("#clock");

clock.innerText = "llll"

function sayHo() {
    console.log("hoho");
}

setTimeout(sayHo, 5000);

 

예제2)

웹 페이지에 2개의 간단한 버튼을 설정하고 setTimeout()과 clearTimeout()에 연결.
첫 번째 버튼이 눌려지면 2초 뒤에 호출되는 타임아웃이 설정되고 clearTimeout()에 사용되는 ID가 저장됩니다.
두 번째 버튼을 누름으로써 당신은 선택적으로 이 타임아웃을 취소.

See the Pen by jongha (@gajong) on CodePen.