timing
브라우저에서는 특정 시간 마다 어떤 일을 수행 하거나 특정 시간 후에 어떤 일을 수행할 수 있다.
(시간 단위 1/1000초 (milliseconds))
setInterval(doIt, 1000): 1초마다 doIt 함수를 실행해라 (멈출 수 없음)
1회만 사용할 때에는 익명함수를 사용해준다.clearInterval(myTime): 설정한 interval 을 없애라 (멈출 때 사용)
() 안에는 중지할 인터벌을 넣어준다.setTimeOut(doIt, 1000): 1초 후에 실행해라 (1번만 실행)
disabled : 한번 실행하면 다시 할 수 없게 막아주는 것
(여러번 실행하면 누적되어 속도가 빨라지기 때문에 여러번 누를 수 없게 막아주는 용도)
<hteml>
<head>
<title>DOM SCRIPT</title>
<meta charset="UTF-8">
</head>
<body>
<h1 id="cnt">0</h1>
<button onclick="setTime()">3초후 경고</button>
<button onclick="interval(this)">카운트</button>
<button onclick="stop()">정지</button>
</body>
<script>
var i = 0;
var time; // 인터벌을 담기 위한 변수 (여러 함수에서 써야하니까 밖에 선언한다.)
function interval(evt){
evt.disabled = true; // 나 자신을 가져오는 것으로 this로 가져올 수 있다.
var elem = document.getElementById('cnt');
// setInterval(실행함수명, 시간ms)
time = setInterval(function(){
i++;
elem.innerHTML = i;
}, 1000);
}
function stop(){
clearInterval(time);
document.getElementsByTagName('button')[1].disabled = false;
}
function setTime(){
setTimeout(function(){
alert('3초가 경과했습니다.');
}, 3000);
}
</script>
</hteml>
개발자가 되어보자