[ 함수 ] 호출 스케줄링

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

setTimeout(() => {
    console.log('Hello')
}, 2000)

//  setTimeout() 이라는 함수를 호출한 상황.
//  2초 후에 익명으로 작성된 콜백 함수의 내용이 console 창에 Hello로 출력 된다.

//  위의 코드를 아래와 같이 작성해도 동일 하다.

const hello = () => {   //  화살표 함수로 생성한 함수 데이터를 hello라는 변수에 저장.
    console.log('Hello')
}

setTimeout(hello, 2000) //  즉, 함수를 하나 만들고 그 함수를 변수에 저장해서 변수를 사용한 상황.

//  위와 같이 setTimeout() 함수를 사용 해서, n초 후에 결과가 나오도록 하는 것을 호출 스케줄링 이라고 한다.
//  즉, 함수가 호출되는 결과를 지연 되게 하는 것을 호출 스케줄링 이라고 한다.

//  아래는 setTimeout() 함수가 동작할 때, 2초가 지나기 전에 타이머를 종료시키는 조건을 추가.
//  여기서 2초가 지나기 전에 타이머를 종료시킨다는 의미는 아래와 같다.
//  타이머를 2초가 지나기 전에 종료 시켜서 특정 결과가 실행되게 하는게 아니고,
//  setTimeout() 함수는 설정한 n초가 반드시 지나야만 특정 결과를 실행 하는 것이다.
//  따라서, 2초가 지나기 전에 타이머를 종료시킨다는 의미는 위의 hello 함수를 실행 되지 않게 한다는 것이다.

//  위에서 setTimeout(hello, 2000) 함수를 실행 하고 나오는 결과를 timeout이라는 변수에 저장해보자.
const timeout = setTimeout(hello, 2000)

//  clearTimeout() 함수의 인자에 넣으면 타이머를 해제 하게 된다.
//  즉, 아무것도 실행 되지 않게 된다.
clearTimeout(timeout)

//  그런데, 2초 타이머를 걸었는데, 아무 조건도 없이 바로 종료 되는것은 조금 이상하니까, 특정 조건을 걸어 보자.
//  사용자가 어떠한 액션을 취했을 때, 타이머가 종료되도록 해보자.

const h1El = document.querySelector('h1')   //  h1 태그를 찾아 오기.

h1El.addEventListener('click', () => {  //  즉, h1 태그를 클릭 하면, 타이머가 종료 된다.
    clearTimeout(timeout)
})

//  위와 같이 코드를 작성 하면, 사용자의 어떤 이벤트에 의해서, clearTimeout 함수가 실행되고,
//  타이머가 종료되어 아무것도 실행 되지 않게 된다.
//  아래에서 확인해보자.

const testmsg = () => { //  testmsg 라는 이름의 변수에 함수를 할당 하고 ~
    console.log('testmsg !')
}

const testTimeout = setTimeout(testmsg, 2000)   //  2초 후에 testmsg 출력.

h1El.addEventListener('click', () => {
    console.log('h1 태그 클릭 !')
    clearTimeout(testTimeout)   //  2초 전에 사용자가 h1 태그를 클릭 하면, testmsg가 출력 되지 않음.
})

//  그밖에 자바스크립트에서 함수의 호출을 스케줄링 할 수 있는 방법이 또 존재 한다.
//  바로, setInterval() 함수와, clearInterval() 함수 이다.
//  사용자가 설정한 n초 마다의 간격마다 함수의 인자에 넣어진 동작이 실행 되고,
//  그렇게 스케줄링한 setInterval() 함수를 종료시키는 함수가 clearInterval() 함수 이다.