[JavaScript] setTimeout(), setInterval()

코딩을 하다보면 특정 시간이 지난 후 또는 시간마다 실행해야 하는 경우가 생긴다.

자바스크립트에 타이머를 사용하는 함수가 두 개 있다.

자바스크립트는 보이지 않는 타이머를 내장하고 있는데 그 타이머를 사용하는 함수로
setTimeout()는 특정 시간이 지난 후에 실행하는 함수이고
setInterval()는 특정 시간마다 반복해서 실행하는 함수이다.

setTimeout(), setInterval() 용법은 어떻게 될까?

setTimeout()는 setTimeout(() => 함수,시간)와 같이 사용하며
인자로 넣은 시간 값이 지난 후에 함수가 실행이 된다.
맨 위의 timeout 버튼을 누르면 2초 후에 텍스트가 변경이 된다.

clearTimeout()는 setTimeout()이 작동시킨 보이지 않는 타이머를 중지시킨다.
clear timeout 버튼에는 clearTimeout()이 포함되어 timeout 버튼과는 다르게 실행되지 않는다.

setInterval()는 setTimeout(() => 함수,시간)와 같이 사용하며 setTimeout과는 다르게 반복되어 실행된다. interval버튼을 누르게 되면 1초마다 숫자가 1씩 올라가게 된다.

clearInterval()는 setInterval()이 작동시킨 타이머를 중지시킨다. clear interval 버튼을 누르게되면 1초마다 올라가고 있는 interval 버튼의 값을 중지시킨다.

var a = 0;

$(".Button1").click(function () {
  setTimeout(() =>  
  $(".Button1").text("2초가 지났습니다."),2000);
});


$(".Button2").click(function () {
   const timeout = setTimeout(() =>  
  $(".Button2").text("2초가 지났습니다."),2000);
  clearTimeout(timeout);
})


$(".Button3").click(function () {
 var interval = setInterval(() =>  
  $(".Button3").text(a++),1000)
 $(".Button4").click(function () {
 $(".Button3").text('interval');
   clearInterval(interval);
})
})