[Essentials] 함수 복습(5) - 타이머 함수

01.타이머 함수

• setTimeout(함수, 시간): 일정 시간 후 함수 실행
• setInterval(함수, 시간): 시간 간격마다 함수 실행
• clearTimeout(): 설정된 Timeout 함수를 종료
• clearInterval(): 설정된 Interval 함수를 종료

02.setTimeout(); & clearTimeout();

setTimeout(function () {
  console.log("Heropy!")
}, 3000)
// 3000ms = 3s, 3초 후 함수 실행
 
const timer = setTimeout( () => {
	console.log("Heropy!");
}, 3000);
// 위와 같은 함수로 화살표 함수를 이용하여 실행(timer 변수에 저장)

• 실습) Hello world!를 클릭하면 함수가 종료되도록 한다.

<!--HTML-->
<h1>Hello world!</h1>

// JS
const timer = setTimeout( () => {
	console.log("Heropy!");
}, 3000); // 3초후에 출력!
// 위와 같은 함수로 화살표 함수를 이용하여 실행(timer 변수에 저장)

const h1El = document.querySelector('h1');
h1El.addEventListener("click", () => {
	clearTimeout(timer); // h1태그 클릭시 timer함수 종료!
})

03.setInterval(); & clearInterval();

setInterval(function () {
  console.log("Heropy!")
}, 3000)
// 3000ms = 3s, 3초 간격으로 함수 실행
 
const timer = setInterval( () => {
	console.log("Heropy!");
}, 3000);
// 위와 같은 함수로 화살표 함수를 이용하여 실행(timer 변수에 저장)

실습) Hello world!를 클릭하면 함수가 종료되도록 한다.

const timer = setInterval( () => {
	console.log("Heropy!");
}, 3000); // 3초 간격으로 출력!
// 위와 같은 함수로 화살표 함수를 이용하여 실행(timer 변수에 저장)

const h1El = document.querySelector('h1');
h1El.addEventListener("click", () => {
	clearInterval(timer); // h1태그 클릭시 timer함수 종료!
})