호출 스케줄링

호출 스케줄링 ?

일정한 시간이 지난 후에 원하는 함수를 호출하는 것

• setTimeout : 지정한 시간 지난 후 지정한 함수 한번만 실행
  (id값 반환)
  
  
• clearTimeout : 반환받은 id 값을 이용하여 setTimeout을 취소
  
  
• setInterval : 지정한 시간 간격을 두고 지정한 함수 계속 실행
  (id값 반환)
  
  
• clearInterval : 반환받은 id 값을 이용하여 setInterval을 취소

😄 code 1. setTimeout

/* JavaScript */
function hello() {
	alert('setTimeout 연습중');
}

setTimeout(hello, 1000);

• 1초 뒤에 팝업창이 한번만 출력이 된다

• 첫번째 인자값은 실행하고자 하는 함수 또는 문자열이 될 수 있다

• 두번째 인자값은 실행전 대기시간으로 ms단위이다 (1000ms = 1s)

😄 code 2. clearTimeout

/* JavaScript */
function hi() {
	alert('clerTimeout 연습중');
}

let timerId = setTimeout(hi, 1000);
alert(timerId);

clearTimeout(timerId);

• 1초 뒤에 실행되는 hi 팝업창, timerId값이 들어있는 팝업창 두개가 실행되어야 하지만 결과는 timerId값이 들어있는 팝업창 하나만 실행된다

  clearTimeout으로 setTimeout을 취소시켰기 때문이다.
  setTimeout은 id값을 반환하는데 반환 값을 변수 timerId에 저장한뒤 저장한 timerId를 clearTimeout의 매개변수에 할당해서 취소할 수 있다

😄 code 3. setInterval

• setTimeout과 문법은 동일하다
• 한가지 차이점은 setInterval은 원하는 함수를 주기적으로 계속 실행한다는 것이다

function hello() {
	alert('setInterval 연습중');
}

setTimeout(hello, 1000);

• 팝업창을 1초 간격으로 계속 실행한다

😄 code 4. clearInterval

function hi() {
	alert('clearInterval 연습중');
}

let timerId = setInterval(hi, 3000);

setTimeout(() => {
	clearInterval(timerId);
    alert('팝업창 정지');
}, 7000);

• 팝업창을 3초 간격으로 계속 실행한다

  7초뒤에 반환 받은 id 값을 이용하여 setInterval을 취소시키고 팝업창 정지라는 메시지를 가진 팝업창을 출력한다

😄 code 5. 중첩 setTimeout

• 중첩 setTimeout을 사용하면 setInterval보다 유연하게 사용할 수 있다

  중첩 setTimeout은 지연 간격을 보장해주지만 setInterval은 지연 간격을 보장해주지 않는다. 즉 함수를 실행하는데 걸리는 시간이 지정한 대기 시간보다 길어진다면 엔진은 다음 함수들을 쉼 없이 호출하는 불상사가 발생할 수 있다

let timer = setTimeout(function click() {
	alert('중첩');
    timer = setTimeout(click, 5000);
}, 2000);

• 팝업창이 2초 후 한번, 5초 후 한번 실행되는 중첩 setTimeout

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍