JavaScript

1. JavaScript
2. 불변성
3. 스코프
4. 실행컨텍스트
5. CI / CD
6. Ajax, Axios, fetch
7. XHR - Xml Http Request
8. 호출 스케줄링
9. 이벤트 흐름,이벤트 종류, 이벤트 위임
10. Closure
11. Map / Set
12. documentFragment

목차

호출스케줄링이란

일정 시간이 지난 후에 원하는 함수를 실행 할 수 있게 하는 것을 ‘호출 스케줄링’ 이라고 한다. 그렇게 실행되는 함수들을 타이머 함수라고도 부른다.

타이머 함수에는 어떤 것들이 있을까?

setTimeout / clearTimeout

setTimeout 함수로 생성한 타이머는 한 번 동작한다.

기본 문법

// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다.
setTimeout(() => console.log("Hi!"), 1000)

// 세 번째 인수로 문자열 'Lee' 전달
setTimeout((name) => console.log(`Hi! ${name}.`), 1000, "Lee");

// 두 번째 인수(delay)를 생략하면 기본값 0이 지정된다.
setTimeout(() => console.log("Hello!"));

setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법

• 예제

	button.addEventListener("click", buttonEvent);

	function buttonEvent() {
		setTimeout(sayHi, 3000,"first","second");
	}
	function sayHi(first,second) {
		alert(first+ "hi"+ second);
	}

• 함수에 인수를 넘겨주기.

const button = document.querySelector(".btn");
    button.addEventListener("click", buttonEvent);

    function buttonEvent() {
      setTimeout(sayHi, 3000, "first", "second");
    }
    function sayHi(first, second) {
      alert(first + "hi" + second);
    }

clearTimeout을 이용해 스케줄링 취소하기

• timer 종료시키기.

let timer = setTimeout(() => alert("hi"), 3000);

button.onclick = plzStopCall;

function plzStopCall() {
	clearTimeout(timer);
}

setInterval / clearInterval

• setInterval의 첫 번째 인수인 콜백 함수는 두 번째 인수로 전달받은 시간이 경과할 때마다 반복 실행되도록 호출 스케줄링된다.