시간과 관련된 Web APIs

1. JavaScript 코드와 브라우저

2. 시간과 관련된 Web APIs

    2.1. setInterval() 함수

    2.2. setTimeout() 함수

    2.3. clearInterval() 함수

3. 화면 슬라이드 애니메이션 구현

---

1. JavaScript 코드와 브라우저

[그림 1] JavaScript 코드와 브라우저 관계

JavaScript는 단일 스레드 기반의 언어로 한 순간에 하나의 작업만 수행할 수 있다. 하지만 JavaScript는 비동기로 동작하기 때문에 단일 스레드임에 불구하고 동시에 여러 작업을 수행한다.

 

비동기로 동작하는 이유는 JavaScript가 아니라 브라우저 때문이다. JavaScript가 실행될 때 브라우저와의 동작은 [그림 1]과 같다.

 

 

2. 시간과 관련된 Web APIs

2.1. setInterval() 함수

일정한 시간 간격으로 작업을 수행하기 위해서 사용한다. 주의할 점은 작업을 수행하는 시간이 일정한 시간 간격보다 오래 걸릴 경우 문제가 발생할 수 있다.

 

사용방법

let 변수 = setInterval(콜백함수, 시간);

 

[그림 2] setInterval 사용 예시

[그림 2]와 같은 코드를 실행하면 1초마다 콘솔창에 5가 출력된다. 숫자는 1000은 1000ms, 즉 1초를 나타낸다.

 

2.2. setTimeout() 함수

일정한 시간 후에 작업을 1번 실행한다. 보통 재귀적 호출을 사용하여 작업을 반복한다. 기본적으로 setInterval()과 달리 지정된 시간을 기다린 후 작업을 수행한다.

 

사용방법

let 변수 = setTimeout(콜백함수, 시간);

 

[그림 3] setTimeout 사용 예시

[그림 3]을 실행하면 4, 3, (3초 뒤) 5, 2, 1 순서로 출력될 것이라고 예상할 수 있지만 실제로는 그렇지 않다.

 

실제로 출력되는 순서는 4, 3, 2, 1, (3초 뒤) 5 이다. 이는 setTimeout() 함수와 같은 Web API들은 script가 모두 끝난 뒤에 실행되기 때문이다.

 

2.3. clearInterval() 함수

setInterval 함수로 반복되고 있는 작업을 멈추게 한다.

 

사용방법

clearInterval(변수);

 

setInterval() 함수의 반환값을 변수에 재할당하여 중단된 작업을 재실행 할 수 있다.

 

사용방법

변수 = setInterval(콜백함수, 시간);

 

 

3. 화면 슬라이드 애니메이션 구현

[그림 4] 화면 슬라이드 애니메이션 구현 HTML

onClick은 클릭했을 때 script에 있는 함수를 실행할 수 있게 해주는 기능이다.

 

script의 첫 번째 if 문은 i의 숫자가 0, 1, 2, 3이 반복되도록 i가 4가 되었을 때 0으로 다시 바꿔준다.

 

banner(n) 함수는 banner(1), banner(2)처럼 ()안에 숫자를 넣어서 실행하는 경우를 제외하고, setInterval(banner, 1000)에서 호출되어 바로 실행될 경우 n은 undefined가 된다.

 

clickHandler는 클릭했을 때 interval이라고 선언된 setInterval() 함수를 중단하고 몇번 버튼을 누르느냐에 따라서 해당하는 배경을 띄워주고, 그 후 interval에 setInterval() 함수를 재할당해서 중단되었던 애니메이션을 재실행한다.

 

두 번째 if 문을 사용한 이유는 n이 undefined일 때는 계속 슬라이드가 정상적으로 넘어가게 하고, clickHandler 함수가 실행되어 banner()의 ()안에 숫자가 지정될 경우 그 사진부터 애니메이션이 실행되도록 하기 위함이다. 예를 들어, '3번' 버튼을 클릭하면 setInterval()함수가 정지되었다가 banner(3)이 실행되면서 n != undefined가 되고 else 문에서 i = 3 - 1; 이므로 3번째(인덱스가 2인) 배경부터 애니메이션이 다시 실행된다.

 

[그림 5] 화면 슬라이드 애니메이션 구현 CSS

CSS에서 #visual > li {} 부분을 보면 left가 -100%라고 되어 있고, #visual > li.on {} 부분에는 left: 0px로 나타난다.

 

JavaScript에서 li의 class가 on으로 바뀔 때 화면 밖 왼쪽에 있던 배경이 왼쪽에서 오른쪽 방향으로 슬라이드되면서 화면을 채우게 된다.

 

[그림 6] 화면 슬라이드 애니메이션이 구현된 웹페이지

웹페이지에서 화면 슬라이드 애니메이션이 정상적으로 작동하는 것을 확인하였다.