setInterval(), clearInterval(), setTimeout()

setInterval(), clearInterval(), setTime() 등을 알아보자

시간에 따라 뭔가를 해주거나 혹은 현재 진행되고 있는 함수의 진행을 멈추거나 할때 쓴다.

다른용도로는 어떻게 쓸지 모르겠지만 여기선 간단한 예제와 함께 어떤 쓰임이 있는지 간략하게 알아보자.

setInterval 메소드에 대해 알아보자.

setInterval()은 지정된 시간후 특정 자바스크립트 코드가 포함된 문자열을 반복하여 호출하는 메소드 이다.

쓰는 방법은

setInterval(func, delay);

이런식으로 쓰게 되는데 func 는 이 안에서 실행되어야 할 함수 이고

delay 는 밀리세컨드 단위로 몇초마다 이 func 를 실행할지 적어준다.

간단하게 body 에 숫자 0 부터 3초마다 1씩 증가되어 값을 찍히게 해보자.

자동으로 숫자값이 3초마다 1씩 증가되는걸 확인 할 수 있다

이렇게 매 시간마다 뭔가 실행해 주는 메소드가 있으면

이러한 반복적인 행동을 중지하는 메서드도 존재한다.

clearInterval 메소드를 알아보자.

clearInterval() 메소드는 현재 진행이 되고있는 함수의 진행을 멈추는데 쓰인다.

멈추는 버튼을 만들어 확인해 보자

/* 다른 탭을 선택후 result 를 다시 클릭하면 처음부터 보실 수 있습니다. */

자바스크립트 로 바꿔서 확인해 보면 clearInterval 메소드를 이용해 어떻게 setInterval 메소드의 행동을 멈췄는지 알 수 있다.

---------------------------------------------------------------

setTimeout 메서드는

일정 시간이 지난 후에 그 안에 있는 내용을 '단 한번' 실행시켜주는 메서드이다.

setTimeout(func, delay)

func 에는 단한번 실행시켜줄 행동을 써놓고, delay 는 밀리세컨드 단위로 몇 초 후에 func 를 실행할지 결정한다.

예제를 한번 보자.

/* 다른 탭을 선택후 result 를 다시 클릭하면 처음부터 보실 수 있습니다. */

----------------------------------------------------------------------

이제 이 세가지 메서드를 적절히 이용한 예제를 한번 실습해 보도록 하자.

예제의 내용은..

1. 브라우저를 키자마자 0 부터 숫자가 찍히게 할것.

2. 중지 버튼을 누르면 점점 늘어나는 숫자가 멈출것.

3. 중지 버튼을 누른후 5초후에 다시 자동실행함수가 실행될것.

한번 직접 짜보는게 중요하다 생각이 들어서 이 예제의 블로그 운영자의 풀이방식은 일단 아랫 부분에 남겨두겠다.

더 괜찮은 방법 과 방식이 있으면 댓글 남겨 주세요.

/* 다른 탭을 선택후 result 를 다시 클릭하면 처음부터 보실 수 있습니다. */