[JavaScript] 호출 스케줄링 (Scheduling a function call)

호출 스케줄링 (Scheduling a function call)

📎호출 스케줄링 (Scheduling a function call)

setTimeout(() => {
  console.log("Hello~");
}, 2000);

→ 이렇게 익명함수로 작성하는 것 뿐만 아니라 const 키워드를 통해서 연결하는 것도 가능 ▼

const hello = () => {
console.log("Hello~"); // 2초 뒤에 동작 Hello~
};

setTimeout(hello, 2000);

hello 변수 첫번째 인수를 대신해서 작성, 하나의 함수 데이터이기 때문에
기존에 익명함수로 작성했던 내용과 동일하게 동작한다.

const hello = () => {
console.log("Hello~");
};

// 2초가 지나기 전에 이 부분의 타이머를 종료하고 싶다면 ▼

const timeout = setTimeout(hello, 2000);
clearTimeout(timeout);

 // 2초가 지나도 아무것도 출력되지 않는다.
 
hello 라는 함수 2초 뒤에 실행하도록 스케줄 잡았고,
그런데 그렇게 잡은 스케줄을 timeout 이라는 변수에 할당해서
필요에 따라서 timeout을 해제할 수 있다. clearTimeout = 타이머를 해제한다.

 

그런데, 타이머를 걸어놓고 바로 종료하는 것은 조금 이상하다.
그래서 사용자가 어떠한 액션을 취했을 때, 타이머가 종료되도록 만들어준다.

 

setTimeout

const hello = () => {
console.log("Hello~");
};

const timeout = setTimeout(hello, 2000);
const h1El = document.querySelector("h1");

h1El.addEventListener("click", () => {
console.log("Clear!"); // Clear!
clearTimeout(timeout);
});

👇🏻 설명

const hello = () => {
console.log("Hello~");
};

const timeout = setTimeout(hello, 2000);
const h1El = document.querySelector("h1");
// document.querySelector 통해 h1 태그 찾은 다음에 할당하겠다.
h1El.addEventListener("click", () => {
// 찾은 h1El 에다가 addEventListener 통해서 첫번째 이벤트로는 click 이라는 이벤트 연결,
// 두 번째 인수로는 콜백함수를 추가
console.log("Clear!"); // Clear! 는 글자를 클릭하면 출력이 되지만 콘솔창에는 출력이 안됨
clearTimeout(timeout);
// 콜백함수 내에서 위에서 잘라낸 clearTimeout(timeout); 함수 추가
});
// 2초가 지나기 전에 글씨를 클릭하게 되면 2초가 지나도 콘솔창에 Hello~ 출력 안됨

 

2초가 지난 뒤에 글자 클릭 ↓

 

2초가 지나기 전에 글자 클릭 ↓

 

setInterval

const hello = () => {
  console.log("Hello~");
};

const timeout = setInterval(hello, 2000);
const h1El = document.querySelector("h1");

h1El.addEventListener("click", () => {
  console.log("Clear!");
  clearInterval(timeout);
});

👇🏻 설명

const hello = () => {
  console.log("Hello~");
};

const timeout = setInterval(hello, 2000); // 2초마다 실행 (왼쪽에 카운트가 늘어남)
// setInterval 몇초마다 함수를 반복적으로 실행할 것인지 결정하는 것
const h1El = document.querySelector("h1");
// document.querySelector 통해 h1 태그 찾은 다음에 할당하겠다.
h1El.addEventListener("click", () => {
  console.log("Clear!");
  clearInterval(timeout);
  // 콜백함수 내에서 위에서 잘라낸 clearTimeout(timeout); 함수 추가
  // 2초마다 hello 함수를 실행하는 setInterval은 timeout 이라는 변수로 받아서
  // h1에 글자를 클릭하게 되면 그 스케줄을 종료하겠다 라고 하는거라 종료된다.
});

 

2초마다 hello 함수를 실행하는 모습 (왼쪽에 카운트가 계속 늘어남) ↓