2017-11-30(자바스크립트 일정시간마다 반복 실행하는 함수,SetInterval())

자바스크립트에서 많이 사용되는 함수중 하나로 setInterval()이 있다. 많이 사용된다는 것은 그만큼 사용도 많이 되고 중요하기 때문일것이다.
하지만 많이 사용됨에도 불구하고 많은 이들이 이를 어떻게 사용하는지 알고 있으나 제대로 활용하는 것은 간단한 일이 아니다. 아래는 setInterval()을 사용하는 방법과 이를 효과적으로 사용하기 위한 팁과 다양한 정보를 알아보고자 한다. 먼저 setInterval()을 사용하는 기본적인 방법은 아래와 같다.

setInterval(function(){...},지연시간);

setInterval()을 사용하는 경우

이  함수를 사용해야 하는 경우는 매우 많이 있다. 특히 웹퍼블리싱 중에서는 아래와 같은 케이스가 존재한다.

* 갤러리 형식의 뷰를 만들어 이미지를 정해진 시간 간격으로 바꾸어 적용하는 경우

* 일정 시간 간격으로 배너 광고를 바꾸면서 보여줄 경우

그렇다면 아래에는 간단한 예제를 통하여 더 자세하게 알아보자.

setInterval 예제

아무런 조건 없이 5초의 시간 간격으로 계속해서 경고창을 띄우는 예제이다.

playAlert = setInterval(function(){
    alert('간격 ')
},3000)

이 스크립트를 실행할 경우 원하는 결과, 5 초의 시간 간격으로 경고창이 화면에 출력된다. 즉 정상 동작됨을 확인할 수 있다. 위 예제는 setInterval을 변수에 저장하여 사용하였다. 그 이유는 변수에 저장한 함수의 경우 clearInterval()을 사용해 중지시킬수 있기 때문이다.

만약 위의 함수 playAlert 을 중지 하려면 아래와 같이 수행하여 중지 시킬수 있다.

clearInterval(playArray);

clearInterval 예제

먼저 위 코드와 동일하나 버튼을 추가하고 이 버튼을 클릭할 경우 clearInterval()함수가 실행되도록 해볼 것이다.

typeof playAlert;

결과가 function 이라고 생각하겠지만 실제로는 number가 나온다. 이 말은 setInterval을 실행시킬 경우 함께 인자로 넘긴 함수가 콜백으로 실행되고 이 함수를 실행한 횟수를 number 타입으로 반환한다.

setTimeout() 함수에 대하여 알아보기

위에 언급한 setTimeout() 은 지연시간을 발생시킨후 특정 함수를 호출할 수 있습니다. 간단한 예제를 만들어보면
아래 예제는 5초 후 해당하는 함수를 한번만 호출하는 함수이다.