[JavaScript] 일정시간 반복, 일정시간 후 실행 하는 시간 함수들

[JavaScript] 일정시간 반복, 일정시간 후 실행 하는 시간 함수들

가끔 코딩을 하다보면 일정시간이 지난후에 자바스크립트를 실행해야 하는경우가 있다.

예를들면.. 시간을 자바스크립트로 움직이게 하던지...

        일정 시간동안 이미지를 교체해주던지...

등등등에 사용할 수 있다.

개인적으로는 사용을 안했으면 하는 함수지만

어쩔 수 없이 사용해야 할때가 있으니 기억해두자!

---

setInterval()

디폴트 사용방법!

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

그럼 사용 예시를 알아보자!

5초에 한번씩 경고창띄우자!

<script type="text/javascript">
playAlert = setInterval(function() {
   alert('http://webisfree.com');
}, 3000);
</script>

---

clearInterval()

setInterval() 함수를 동작시키다 멈춰야 할때 사용되는 함수!!

사용 예를 보면 쉽게 이해야 될 것이다.  

실행화면

var myVar = setInterval(function(){ setColor() }, 300);
 
function setColor() {
    var x = document.body;
    x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
 
function stopColor() {
    clearInterval(myVar);
}

---

setTimeout()

위의 경우에는 일정 시간동안 반복시키는 동작이지만

딱! 한 번!일정 시간이 지난 후 실행을 하고 싶을 경우에 사용되는 함수

사용 예를 보면 이렇다

실행화면

var myVar;
 
function myFunction() {
    myVar = setTimeout(alertFunc, 3000);
}
 
function alertFunc() {
    alert("Hello!");
}