04_타이머함수

자바스크립트에는 특정시간이 되었을 때 함수를 실행하거나 특정 시간 동안 함수를 반복하기 위해서 시간을 재는 함수가 있는데, 이것을 '타이머함수' 라고 한다.

 

일정 시간마다 반복하기  -  setInterval( )
setInterval(콜백함수, 시간)

// 선언식으로 표현하기

function greeting(){

   console.log('안녕하세요');

}

setInterval(greeting, 2000);

콘솔창에  '안녕하세요'가 일정시간마다 반복으로 나온다.

 // 화살표 함수로 표현하기

setInterval ( ( ) => {

   console.log('안녕하세요');

}, 2000) ;

 

 

반복실행 멈추기, 타이머 함수 종료 시키기 - clearInterval( )
clearInterval(타이머)

setInterval( ) 함수를 실행하면 타이머가 시작되는데,타이머에 이름을 지정해 주면 그 이름을 사용해서 타이머를 멈출 수 있다.

예제

let timer = setInterval(() => {

   console.log('안녕하세요');

},2000);

clearInterval(timer);

// 종합예제

인사말을 5번 표시하면 타이머를 멈추는 소스를 추가해보자.

counter라는 변수를 만들어서 화면에 표시되는 횟수를 체크하고, 타이머에 timer라는이름도 지정해보자.

counter 값을 1씩 증가시킨 후 counter가 5가 되면clearInterval( )함수에서 timer를 종료한다.

// 화살표함수

 

let counter = 0;

let timer = setInterval( () => {

   console.log("안녕하세요");

   counter ++;

   if(counter === 5){

      clearInterval(timer);

   }

},2000);

// 선언식함수

let counter = 0; //횟수저정

let timer; //setInterval을어떻게 변수에 넣어주나 했는데 이런식이 있었네. 선언하고 아래에서 넣어주면되네.

function greeting(){

   console.log("안녕");

   counter ++;

   if(counter === 5){

      clearInterval( timer);

   }

}

timer = setInterval(greeting, 2000);

 

 

특정 시간 이후에 실행하기, 일정시간 지난 후에 콜백함수 실행 - setTimeout( )
setTimeout(콜백함수, 시간)

//예제

setTimeout(() => {

   console.log("안녕하세요")

},3000);

// 선언식으로 표현하기

function ad(){

   console.log('안녕하세요. 5초입니다.')

}

setTimeout(ad, 5000);   //5초뒤에 '안녕하세요, 5초입니다' 라고 출력 됨