오늘 공부한 내용 요약
( 모던 JavaScript 튜토리얼 학습 )
1. setTimeout과 setInterval을 이용한 호출 스케줄링
호출 스케줄링 - 일정시간이 지난후 원하는 함수를 예약실행 할 수 있게 하는 것
방법은 2가지가 있는데
1. setTimeout ->일정 시간이 지난 후에 함수를 실행
2. setInterval -> 일정 시간 간격을 두고 함수를 실행
1) setTimeout
let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)func|code는 실행하고자 하는 코드로, 문자열도 들어갈순 있지만 대부분 함수가 들어감
delay는 대기시간으로 1000 = 1초 이며 / 기본값은 0이다
예시
function sayHi(who, phrase) {
alert( who + ' 님, ' + phrase );
}
setTimeout(sayHi, 1000, "홍길동", "안녕하세요."); // 홍길동 님, 안녕하세요.함수 대신 문자열을 사용하는 것보다는 익명 화살표 함수를 이용하자
setTimeout(() => alert('안녕하세요.'), 1000);- 스케줄링 취소하기
let timerId = setTimeout(...);
clearTimeout(timerId);2) setInterval
setTimeout과 동일한 문법 사용.
차이점은 setTimeout이 함수를 단 한 번만 실행하는 것과 달리 setInterval은 함수를 주기적으로 실행하게 만듭니다.
예시)
// 2초 간격으로 메시지를 보여줌
let timerId = setInterval(() => alert('째깍'), 2000);
// 5초 후에 정지
setTimeout(() => { clearInterval(timerId); alert('정지'); }, 5000);3) 중첩 setTimeout
일정 간격을 두고 실행하는 방법에는 setInterval 외에 중첩 setTimeout도 있음
let timerId = setTimeout(function tick() {
alert('째깍');
timerId = setTimeout(tick, 2000); // (*)
}, 2000);
와
let timerId = setInterval(() => alert('째깍'), 2000); 동일중첩 setTimeout을 이용하는 방법은 지연 간격을 보장하지만 setInterval은 이를 보장하지 않습니다.
let i = 1;
setInterval(function() {
func(i++);
}, 100);
와
let i = 1;
setTimeout(function run() {
func(i++);
setTimeout(run, 100);
}, 100);setInterval을 사용하면 func호출 사이의 지연 간격이 실제 명시한 간격보다 짧아지는데 이는 func을 실행하는 데 소모되는 시간도 포함시키기 때문
중첩 setTimeout을 사용하면 명시한 지연간격이 보장됩니다.
이렇게 지연 간격이 보장되는 이유는 이전 함수의 실행이 종료된 이후에 다음 함수 호출에 대한 계획이 세워지기 때문입니다
- 대기 시간이 0인 setTimeout
setTimeout(func, 0)이나 setTimeout(func)을 사용하면
setTimeout의 대기 시간을 0으로 설정할 수 있음
-> 현재 스크립트의 실행이 종료되자마자 원하는 함수가 실행되도록 할 수 있다.
setTimeout(() => alert("World"));
alert("Hello"); // Hello 다음 World 출력반성
가능했던 학습시간에 비해 성과가 매우 적었던 하루
공부사이트
위의 내용은 공부중 본인이 이해한 내용으로 몇몇 틀린 내용이 있을 수 있습니다.
회독중 발견시 수정하겠습니다
