#실무에 자주 쓰이는 함수1. 타이머 함수.
특정한 시간에 특정한 함수를 실행할 수 있게 하는 함수.
| 매소드 | 설명 |
|---|---|
| setTimeout(funtion, millisecond) | 일정 시간 후 함수를 다시 한 번 실행 |
| setinterval(funtion, millisecond) | 일정 시간 마다 함수를 반복해서 실행 |
| clearTimeout(id) | 일정 시간 후 함수를 한 번 실행하는 것을 중지 |
| clearlnterval(id) | 일정 시간마다 함수를 반복하는 것을 중단 |
code : 일정시간 후 실행시킬 자바스크립트 코드를 포함한 문자열
delay : 문자열 code 내에 있는 자바스크립트 코드가 실행되기까지 걸리는 시간 (1/1000초 단위)
타이머 메서드는 특정 시간에 특정 함수를 실행하게 하는 메서드이다.
setTimeout() 메서드는 특정 시간 후에 함수를 한 번 실행하고,
setInterval() 메서드는 특정 시간마다 함수를 실행한다.
setTimeout() 메서드는 한 번만 실행하므로 특별히 주의할 사항이 없지만,
setInterval() 메서드는 지속적으로 실행하므로 지속적으로 메모리를 차지하므로 주의해야 한다.
타이머를 멈추려면 clearTimeout() 메서드와 clearInterval() 메서드를 사용한다.
setTimeout() 메서드와 setInterval() 메서드를 사용하면 아이디를 리턴하는데,
이 타이머 아이디를 clearTimeout() 메서드와 clearInterval() 메서드의 매개 변수에 넣어주면 타이머를 정지 할 수 있다.
[아래 그림은 setTimeout() 메서드와 setInterval() 메서드의 차이를 나타낸 그림]
++예제++
- 타이머 메서드
<script>
//윈도우가 로드될 때
window.onload = function (){
alert('3초 후 이 페이지는 종료됩니다.');
// 3초 후에 함수를 실행한다.
window.setTimeout(function (){
window.open('about:blank', '_self').close();
}, 3000);
}
</script> - 타이머 정지 메서드
<script>
//윈도우가 로드될 때
window.onload = function (){
// 1초마다 함수를 실행한다.
var intervalID = setInterval(function (){
document.body.innerHTML += '<p>' + new Date() + '</p>';
},1000);
// 10초 후에 함수를 실행한다.
setTimeout(function (){
//타이머를 종료한다.
clearInterval(intervalID);
}, 10000);
}
</script> ####setInterval(function,millisecond)clearTimeout(id) setInterval()은 지정된 시간후 특정 자바스크립트 코드가 포함된 문자열을 반복하여 호출하는 메소드입니다. setTimeout() 이 지정 시간 후 한번만 호출하는데 비해, 이 메소드는 반복하여 호출 됩니다
++예제++
//1초마다 함수를 실행
<span id='txt'>0</span>
<script>
var cnt = 0;
function add(){
document.getElementById("txt").innerHTML = cnt;
cnt++;
}
var timer = setInterval(add, 1000);
</script>위의 예제를 실행하면 0부터 1초마다 값이 계속 올라갑니다.
####clearInterval setInterval 함수로 시작된 타이머의 실행을 중단시킬 때 사용됩니다.
++예제++
<span id='txt'>0</span>
<script>
var cnt = 0;
function add(){
if (cnt == 20){
clearInterval(timer);
}
document.getElementById("txt").innerHTML = cnt;
cnt++;
}
var timer = setInterval(add, 1000);
</script>위의 예제를 실행하면 0부터 1초마다 값이 계속 올라가다가 20에서 멈춥니다.
정리문서 바로가기
- 1.동기vs비동기_통신.md
-
- 실무에서 자주쓰이는 함수.
- 3. 함수지향.
개인별문서 바로가기