| setInterval(func( ){자바스크립트 코드}, 일정 시간 간격) | 지속적으로 일정한 시간 간격으로 함수를 호출해 코드를 실행 |
| setTimeout(func(){자바스크립트 코드}, 일정 시간 간격) | 단 한 번 일정한 시간 간격으로 함수를 호출해 코드를 실행 |
| setInterval( ) | setTimeout( ) |
| 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 떄 사용 | 코드를 바로 실행하지 않고 일정시간 기다린 후 실행 |
| 첫 번쨰 인자로 실행할 코드를 담고 있는 함수를 받고 두 번째 인자로 반복주기를 밀리초(ms)단위로 받는다. | 첫 번쨰 인자로 실행할 코드를 담고 있는 함수를 받고 두 번째 인자로 지연시간을 밀리초(ms)단위로 받는다. |
| clearInterval( )메서드로 중지한다. | clearTimeout( )메서드로 중지한다. |
1. setInterval
- 창을 열면 시:분:초가 1초 간격으로 시간이 가게 하고, 10초가 지나면 멈추게 한다.
1. HTML 파일
- <h2>태그로 현재시간을 나타내고 창이 뜨자마자 바로 setInterval이 뜨게 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setInterval</title>
</head>
<body onload = "closckStart()" >
<h2 id="timeView">현재시간</h2>
</body>
</html>2. js구현<script>
- 현재 시간을 구해 h2에 저장한다.
<script>
function clockStart() {
var now = new Date();
var hour = now.getHours();
var minutes = now.getMinutes();
var second = now.getSeconds();
document.querySelector("#timeView").innerHTML = hour + ":" + minutes + ":" + second;
}
</script>
- 계속 Interval이 될 것이기 때문에 clearInterval로 중단 시켜야 한다.
- interval을 중단시키기위해서 전역변수를 설정하고 10초까지만 Interval을 실행하게 한다.
<head>
<script>
var cnt = 0;
var timer;
function clockStart() {
// 현재 시간을 구하여 h2에 저장
var now = new Date();
var hour = now.getHours();
var minutes = now.getMinutes();
var second = now.getSeconds();
document.querySelector("#timeView").innerHTML = hour + ":" + minutes + ":" + second;
cnt++; // 시간이 들어가고 나서 cnt 변수에 +1를 해주면 +1초 된것과 동일함
if(cnt>10) { // 10초가 넘는다면 중단시키기
clearInterval(timer);
}
}
</script>
</head>
<body onload="timer = setInterval('clockStart()',1000)"> <!-- 1초동안 반복, 2초면 2000 -->
<h2 id="timeView">현재시간</h2>
</body>
</html>- clearInterval( )안에 넣은 변수를 setInterval과 연결시켜준다.!!
2. setTimeout
- 이미지를 일정한 시간 간격으로 호출하는 기능을 구현한다.
- 창을 새로 열자마자 이미지가 바로 바뀌게 한다.
1. HTML 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setTimeout</title>
<style>
img{width:400px; height:400px;}
</style>
</head>
<body onload="changeImg()">
<img src="../img/dog5.jpg" id="img"/>
</body>
</html>- changeImg( )를 onload해서 창을 열자마자 changeImg( )함수가 실행되게 한다.
2. js구현<script>
- 이미지가 들어갈 배열을 생성하고 난뒤에 changeImg( )함수가 실행될 때마다 idx 변수에 ++ 해준다. 그리고 if문으로 idx가 배열의 크기보다 커지게 되면 다시 idx를 0으로 해서 무한반복하게 한다!
<script> // 확장자명이 같으면 확장자명 안적어도 된다.
var imgName = ['dog2.jfif','dog3.jpg','dog4.jpg','dog5.jpg'];
var idx = 0;
function changeImg() {
document.getElementById("img").src="../img"+imgName[idx++]; // ++ 일때는 0번째가 먼저 출력되고 다음에 1실행
if(idx >= imgName.length)
idx = 0;
setTimeout('changeImg()',1000); // 1초에 한 번씩 실행
}
</script>- setTimeout을 중단시키기 위해서 timer 변수를 생성해서 clearTimeout( )를 사용해 멈추게 한다.
<script> // 확장자명이 같으면 확장자명 안적어도 된다.
var imgName = ['dog2.jfif','dog3.jpg','dog4.jpg','dog5.jpg'];
var idx = 0;
function changeImg() {
document.getElementById("img").src="../img/"+imgName[idx++]; // ++ 일때는 0번째가 먼저 출력되고 다음에 1실행
var timer = setTimeout('changeImg()',1000); // timer 변수를 생성하는 것은 setInterval과 동일
if(idx >= imgName.length) // 그림이 다 나오면 멈춤
clearTimeout(timer);
}
</script>
<참고>
'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글
| [js] onkeydown으로 input에 숫자만 입력하기 (0) | 2022.02.10 |
|---|---|
| 프론트엔드3-9. [javascript] window.scroll (0) | 2022.02.10 |
| 프론트엔드3-7. [javascript] 팝업창띄우기 예제(window와 screen) (0) | 2022.02.10 |
| 프론트엔드3-6. javascript의 내장객체 BOM(브라우저객체모델) (0) | 2022.02.09 |
| 프론트엔드3-5. javascript의 내장객체 date와 달력만들기예제 (0) | 2022.02.09 |
