728x90
자바스크립트의 타이머는 엄격하지 않음!!
setTimeout
시간만큼 함수를 불러줌
setTimeout(함수명, 시간)
1초 뒤 함수 부르기
함수명, 시간(1000분의 1초)
<body>
<script>
function f_time() {
alert("안녕");
}
setTimeout(f_time, 1000);
</script>
</body>
2초마다 함수 부르기(재귀호출)
<body>
<script>
function f_time() {
alert("안녕");
setTimeout(f_time, 2000);
}
f_time();
</script>
</body>
누가 먼저 불리게?(비동기함수)
제어권을 넘김(2번 먼저 불리고 1번이 불림)
<body>
<script>
function f_time() {
alert("1. 누가 먼저 불려??")
}
setTimeout(f_time,2000);
alert("2. 누가 먼저 불려??")
</script>
</body>
계속 불리고 말고
<body>
<input type="button" value="Go!" onclick="f_go()">
<input type="button" value="Stop!" onclick="f_stop()">
<div id="id_disp"></div>
<script>
var v_disp = document.getElementById("id_disp");
var v_timer1;
function f_time() {
v_disp.innerHTML += "배고파<br>";
v_timer1 = setTimeout(f_time, 1000);
}
function f_go() {
f_time();
}
function f_stop() {
clearTimeout(v_timer1);
}
</script>
</body>
더보기
div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용
1) Go!만 구현
<body>
<input type="button" value="Go!" onclick="f_go()">
<input type="button" value="Stop!" onclick="f_stop()">
<div id="id_disp"></div>
<script>
var v_disp = document.getElementById("id_disp");
function f_time() {
v_disp.innerHTML += "배고파<br>";
setTimeout(f_time, 1000);
}
function f_go() {
f_time(); //재귀호출
}
function f_stop() {
}
</script>
</body>
2) Stop() 구현
stop()을 하려면 timer를 멈춰야함
함수의 리턴값을 지정해줘
<body>
<input type="button" value="Go!" onclick="f_go()">
<input type="button" value="Stop!" onclick="f_stop()">
<div id="id_disp"></div>
<script>
var v_disp = document.getElementById("id_disp");
var v_timer1;
function f_time() {
v_disp.innerHTML += "배고파<br>";
v_timer1 = setTimeout(f_time, 1000);
}
function f_go() {
f_time(); //재귀호출
}
function f_stop() {
}
</script>
</body>
3) clearTimeout
setTimeout을 취소
setTimeout와 짝꿍
<body>
<input type="button" value="Go!" onclick="f_go()">
<input type="button" value="Stop!" onclick="f_stop()">
<div id="id_disp"></div>
<script>
var v_disp = document.getElementById("id_disp");
var v_timer1;
function f_time() {
v_disp.innerHTML += "배고파<br>";
v_timer1 = setTimeout(f_time, 1000);
}
function f_go() {
f_time(); //재귀호출
}
function f_stop() {
clearTimeout(v_timer1);
}
</script>
</body>