setTimeout
- 특정한 시간이 지난 후 수행될 내용을 처리할 때 활용한다.
- 기본 형식
setTimeout(function(){수행할 내용}, 1/1000초 시간) - 자원 해제
해당 내용을 수행한 후에는 반드시 자원해제를 하여야 메모리 부하를 줄여준다
특히, 반복적으로 수행될 경우 자원해제를 하지 않으면 메모리 overflow 현상이 발생
var sett01 = setTimeout(function(){
// 5초 이후에 수행할 내용 기술
// 마지막 라인에서 clearTimeout() 내장 메서드를 통해서 자원해제
clearTimeout(sett01)
},5000)
ex) 임의의 구구단 문제가 form요소 객체에 출력되고, 해당 문제가 5초 이후에 정답이 입력되면 정답 그렇지 않으면 오답이 출력
<body>
구구단 :
<input type="text" name="num01" value="9" size="2"> X
<input type="text" name="num02" value="2" size="2"> =
<input type = "text" name="sum" value="0">
<div id="container"></div>
</body>
<script>
if(confirm("문제를 시작하겠습니까?")){
var num01Obj = document.querySelector("[name=num01]")
num01Obj.value=parseInt(Math.random()*8+2)
var num02Obj = document.querySelector("[name=num02]")
num02Obj.value=parseInt(Math.random()*9+1)
// corVal : 문자열 자동 형변환 처리
var corVal = num01Obj.value*num02Obj.value
var sett01= setTimeout(function(){
// 5초 이후에 수행될 내용
alert("시간이 종료되었습니다.\n 정답은 "+corVal)
var inputVal = parseInt(document.querySelector("[name=sum]").value)
// 입력한 값과 정답을 비교
if(corVal==inputVal){
div.innerHTML+="정답"
}else{
div.innerHTML+="오답"
}
clearTimeout(sett01)
},5000);
}
</script>setInterval
- 특정한 시간단위로 반복해서 수행할 내용이 있을 때, 처리하는 함수
- 기본형식
setInterval(function(){ 반복할 내용 },1/1000초) - 중단 처리
해당 내용을 변수로 지정해서 clearInterval(변수)로 하면 중단이 된다.
반복 수행을 메모리 해제 처리
ex) 테이블에 1초마다 순서대로 번호와 배경색 추가되게 만들기
<table height="300">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<script>
var tdArry = document.querySelectorAll("td")
var idx = 0;
var int01 = setInterval(function(){
tdArry[idx].innerText=(idx+1)
tdArry[idx].style.background="yellow";
if(idx==8){
clearInterval(int01) // 마지막 테이블번호가 되면 자원해제
}
idx++;
},1000)
ex) 랜덤한 td의 글씨 색상, 배경색상, 글씨 포인트 변경되게 하기
var set01= setTimeout(function(){
// 전체 테이블 번호와 배경색 추가된 후에 실행되게 하기 위해 10초 이후 시작되게 설정
setInterval(function(){
for(var idx=0;idx<tdArry.length;idx++){
// 초기화 처리(변경된 색상 원래대로 복구, 하나의 td만 계속 변하게)
tdArry[idx].style.background="yellow";
tdArry[idx].style.color="black"
tdArry[idx].style.fontSize="10px"
}
// td[0]~td[8]까지 임의로 설정을 바꿔준다
var ranIdx = parseInt(Math.random()*9)
tdArry[ranIdx].style.background="aliceblue";
tdArry[ranIdx].style.color="tomato"
tdArry[ranIdx].style.fontSize="40px"
},500)
clearTimeout(set01)
},10000)
아자아자 화이팅