setInterval() ==> 주기적인 스케줄링
clearInterval
setTimeout() ==> 단발성 스케줄링
clearTimeout
0
<!DOCTYPE html>
<html>
<style>
* {margin: 0; padding: 0;}
.numberArea {
width: 100px; height: 100px; font-size: 30px;
border-radius: 50%; line-height: 100px; text-align: center;
background-color: orange; color: white;
}
button {width: 100px; height: 40px; border: 1px solid gray; margin-top: 10px;}
</style>
<div id="numberArea" class="numberArea">0</div>
<button id="startBtn">START</button>
<button id="stopBtn">STOP</button>
<script>
let toggleBtn= null; //Handler 핸들러
function increaseNumber(){
let numberArea = Number(document.getElementById('numberArea').innerHTML);
numberArea++;
document.getElementById('numberArea').innerHTML = String(numberArea);
}
document.querySelector('#startBtn').onclick = function(){
toggleBtn = setInterval( increaseNumber , 1000 );
//아래 코드를 안넣으면 START버튼을 반복 클릭했을때
//toggleBtn에 setInterval이 반복적으로 담겨서 clearInterval이 안먹는다.
document.querySelector('#startBtn').setAttribute('disabled', 'true');
document.querySelector('#stopBtn').removeAttribute('disabled');
}
document.querySelector('#stopBtn').onclick = function(){
clearInterval( toggleBtn );
document.querySelector('#stopBtn').setAttribute('disabled', 'true');
document.querySelector('#startBtn').removeAttribute('disabled');
}
</script>
</html>
setInterval은 CPU에 문제가 생기기때문에 잘 쓰지않는다.
따라서 아래코드처럼 setTimeout을 setInterval처럼 사용해야한다.
<script>
let myCounter = 0;
function increseCounter(){
document.write(myCounter++);
intervalFunction();
}
function intervalFunction(){
setTimeout(increseCounter, 1000);
}
intervalFunction();
</script>
<script>
let myCounter = 0;
function increseCounter(){
document.write(myCounter++);
setTimeout(increseCounter, 1000);
}
setTimeout(increseCounter, 1000);
</script>반응형
'JAVASCRIPT' 카테고리의 다른 글
| JAVASCRIPT ) 날짜 시간 (2) | 2024.07.16 |
|---|---|
| JAVASCRIPT ) 이벤트 (0) | 2024.07.16 |
| JAVASCRIPT ) Element 속성 API (0) | 2024.07.15 |
| JAVASCRIPT ) DOM 제어대상 선택자 (0) | 2024.07.15 |
| JAVASCRIPT ) 자바스크립트로 스타일 주기 (0) | 2024.07.15 |