[JavaScript] 중급 #12 - setTimeout / setInterval

 

setTimeout: 일정 시간이 지난 후 함수를 실행

  -  두개의 매개변수를 받음

  -  첫 번째 매개변수는 일정 시간이 지난 후 실행될 함수, 두 번째는 지연될 시간

 

e.g.)         

function fn() {
	console.log(3);
}

setTimeout(fn, 3000); // 3초 후에 숫자 3 출력

 

e.g.) 위 예제와 동일하게 작동함

setTimeout(function() {
	console.log(3);
}, 3000);

 

e.g.)

const tId = function showName(name) {
	console.log(name);
}

setTimeout(showName, 3000, "Angel");
clearTimeout(tId);

  -  setTimeout()의 매개변수를 확인해보면, showName은 실행시킬 함수, 3000은 delay시간, ‘Angel’은 showName함수에 들어갈 인수이다.

  -  clearTimeout은 예정된 작업을 제거

 

e.g.) delay = 0 일 때

setTimeout(function() {
	console.log(2);
}, 0);

console.log(1);

  →  1이 먼저 출력되고 2가 출력됨

      현재 실행 중인 스크립트가 종료된 이후에 스케줄링 함수를 실행시키기 때문

      그리고 브라우저는 기본적으로 4ms 이상의 대기 시간이 있음

 

 

setInterval: 일정 시간 간격으로 함수를 반복

function showName(name) {
	console.log(name);
}

const tId = setInterval(showName, 3000, "Angel"); // 3초마다 “Angel” 출력

clearInterval(tId); // 예정된 작업을 제거

       

e.g.)         

let num = 0;

function showTime() {
	console.log(`${num++}초 지났습니다.`);
	
	if(num >3) {
		clearInterval(tId);
	}
}

const tId = setInterval(showTime, 1000);


//→	0초 지났습니다.
//	1초 지났습니다.
//	2초 지났습니다.
//	3초 지났습니다. 출력

 

 

 

 

↓ [코딩앙마] 자바스크립트 중급 강좌 링크

https://www.youtube.com/watch?v=nwk_aNbFEEc