๐ปํ์ด๋จธ๐ป
- ์ผ์ ํ ์๊ฐ ํ์ ๋๋ ์ผ์ ํ ๊ฐ๊ฒฉ์ผ๋ก ํจ์๋ฅผ ์คํํ๊ฑฐ๋, ์ผ์ ํ ์๊ฐ ํ์ ์ฝ๋๋ฅผ ์คํํ๋ค.
ํ์ด๋จธ ์์
1. id setTimeout(function , milliseconds)
- 1ํ์ฑ ํ์ด๋จธ
- function: ์คํํ ํจ์๋ฅผ ์ง์ ํ๋ค.
- milliseconds: ํจ์๊ฐ ์คํ๋ ๋๊ธฐ ์๊ฐ(๋ฐ๋ฆฌ์ด)์ ์ง์ ํ๋ค.
2. id setInterval(function , milliseconds)
- ๋ฐ๋ณต ํ์ด๋จธ
- function: ์คํํ ํจ์๋ฅผ ์ง์ ํ๋ค.
- milliseconds: ํจ์๊ฐ ์คํ๋ ๋๊ธฐ ์๊ฐ(๋ฐ๋ฆฌ์ด)์ ์ง์ ํ๋ค.
ํ์ด๋จธ ์ข ๋ฃ
1. void clearTimeout(id)
- setTimeout()์ ์ํด ์ค์ ๋ ํ์ด๋จธ๋ฅผ ์ทจ์ํ๋ค.
- id: setTimeout()์์ ๋ฐํ๋ ํ์ด๋จธ ์๋ณ์
2. void clearInterval(id)
- setInterval()์ ์ํด ์ค์ ๋ ํ์ด๋จธ๋ฅผ ์ทจ์ํ๋ค.
- id: setInterval()์์ ๋ฐํ๋ ํ์ด๋จธ ์๋ณ์
๐ปํ์ด๋จธ ์์&์ข ๋ฃ๐ป
๊ธฐ์ด์ฝ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>ํ์ด๋จธ</h1>
<form name="form1">
<fieldset>
<legend>setTimeout</legend>
<input type="button" value="๋ฒํผ" name="btn1">
<input type="text" name="txt1">
</fieldset>
<fieldset>
<legend>setInterval</legend>
<input type="button" value="๋ฒํผ" name="btn2">
<input type="text" name="txt2">
</fieldset>
<fieldset>
<legend>์กฐ์</legend>
<input type="button" value="์์" name="btn3">
<input type="button" value="๋ฉ์ถค" name="btn4">
<input type="text" name="txt3">
</fieldset>
</form>
</body>
</html>ํ์ด๋จธ ์์
<script>
var btn1 = document.form1.btn1;
var btn2 = document.form1.btn2;
var txt1 = document.form1.txt1;
var txt2 = document.form1.txt2;
btn1.onclick = m1;
function m1() {
setTimeout(f1, 1000); //3์ด ํ์ f1๋ฅผ ์คํํ๋ค
}
function f1() {
alert('f1');
txt1.value = (new Date()).toLocaleTimeString();
}
btn2.onclick = m2;
function m2() {
setInterval(f2, 1000);
}
function f2() {
// alert('f2');
txt2.value = (new Date()).toLocaleTimeString();
}
</script>
setTimeout์ ๋ฒํผ 1๋ฒ ๋๋ ์ ๋ 1ํ๋ง ์คํ๋๋ค.
setInterval์ ๋ฒํผ์ 1๋ฒ ๋๋ฌ๋ ํ์ด๋จธ๊ฐ ๊ณ์ ์คํ๋๋ค.
ํ์ด๋จธ ์ข ๋ฃ
<script>
var btn3 = document.form1.btn3;
var btn4 = document.form1.btn4;
var txt3 = document.form1.txt3;
var n =1;
var timer =0;
btn3.onclick = m3;
function m3() {
timer = setInterval(f3, 100); //0.1s
}
function f3() {
txt3.value = n;
n++;
}
btn4.onclick = m4;
function m4() {
clearInterval(timer);
}
</script>
์ฃผ์ํ ์ ์ ์์์ ์ฌ๋ฌ๋ฒ ๋๋ฅด๋ฉด ๋ฉ์ถค์ ๋๋ฌ๋ ์ข ๋ฃ๋์ง ์๋๋ค.
ํจ์๋ฅผ ์คํํ ๋๋ง๋ค n๊ฐ์ ํ์ด๋จธ๊ฐ ์์ฑ๋๊ธฐ ๋๋ฌธ์ด๋ค.
id๋ ๋ง์ง๋ง ํ์ด๋จธ์ id๋ง ๊ธฐ์ตํ๋ฏ๋ก ์ด์ ํ์ด๋จธ๋ฅผ ๋ฉ์ถ ์ ์๋ค.
๊ทธ๋์ ๋ฐ๋ก ํต์ ๋ฅผ ํด์ค์ผํ๋ค.
ํต์ ๋ฐฉ๋ฒ
1. ํ์ด๋จธ ์ค๋ณต ์คํ์ ๊ธ์งํ๋ค.
๋ณดํธ์ ์ธ ๋ฐฉ๋ฒ์ด๋ค.
<script>
var btn3 = document.form1.btn3;
var btn4 = document.form1.btn4;
var txt3 = document.form1.txt3;
var n =1;
var timer =0;
btn3.onclick = m3;
function m3() { //์์
if(timer == 0){
timer = setInterval(f3, 100); //0.1s
}
}
function f3() {
txt3.value = n;
n++;
}
btn4.onclick = m4; //๋ฉ์ถค
function m4() {
clearInterval(timer);
timer=0;
}
</script>timer๊ฐ 0์ผ๋๋ง setIntervalํจ์๋ฅผ ํธ์ถํ๋ค.
๋ฉ์ถ ํ ์ฌ์์์ ํ๋ ค๋ฉด clearInterval ๋ค์ timer์ 0์ ๋์ ํ์ฌ ๋ฆฌ์ ํด์ค๋ค.
2. ํ์ด๋จธ๋ฅผ ๋ฐฐ์ด๋ก ๋ด์ ๊ธฐ์ตํ๋ค.
<script>
var btn3 = document.form1.btn3;
var btn4 = document.form1.btn4;
var txt3 = document.form1.txt3;
var n =1;
var timer =0;
var timerlist = [];
btn3.onclick = m3;
function m3() {
timer = setInterval(f3, 100); //0.1s
timerlist.push(timer);
}
function f3() {
txt3.value = n;
n++;
}
btn4.onclick = m4;
function m4() {
//์์ฐจ์ค์ง
// timer = timerlist.pop();
// clearInterval(timer);
//์ผ๊ด์ค์ง
for (var i=0; i<timerlist.length; i++) {
clearInterval(timerlist[i]);
}
}
</script>์คํํ ๋๋ง๋ค timerlist ๋ฐฐ์ด์ ์ถ๊ฐํ์ฌ ํ์ด๋จธ id๋ฅผ ๊ธฐ์ตํ๋ค.
์์ฐจ ์ค์ง๋ ๋ง์ง๋ง ์์๋ฅผ pop์ผ๋ก ๊บผ๋ด ํด๋น id์ ํ์ด๋จธ๋ฅผ ์ค์ง์ํจ๋ค.
๐ป์ด๋ฏธ์ง ์ฌ๋ผ์ด๋๐ป
๊ธฐ์ด์ฝ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>ํ์ด๋จธ</h1>
<img src="../asset/images/catty01.png" name="cat1">
</body>
</html> <script>
//์ด๋ฏธ์ง ์ฌ๋ผ์ด๋
var cat1 = document.images['cat1'];
var m =1;
var timer =0;
cat1.onclick = m5;
function m5() {
if (timer==0){
timer = setInterval(f5, 500);
} else {
clearInterval(timer);
timer=0; //reset
}
}
function f5() {
m++;
if (m>9) m=1; //9์ฅ์ ์ฌ์ง ๋ฌดํ๋ฃจํ
cat1.src = "../asset/images/catty0" + m + ".png";
}
</script>
์ฌ์ง์ ํด๋ฆญํ๋ฉด ์๋์ผ๋ก ์ด๋ฏธ์ง๊ฐ ๋ณ๊ฒฝ๋๊ณ ๋ค์ ํด๋ฆญํ๋ฉด ์ด๋ฏธ์ง๊ฐ ๋ฉ์ถ๋ค.
'WEB > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] Content ์กฐ์(1) : innerText, innerHTML, textContent (0) | 2023.10.10 |
|---|---|
| [JavaScript] DOM์ ๊ธฐ์ด (0) | 2023.10.10 |
| [JavaScript] select box ํธ๋ค๋ง (0) | 2023.10.06 |
| [JavaScript] radio ํธ๋ค๋ง (0) | 2023.10.06 |
| [JavaScript] checkbox ํธ๋ค๋ง (0) | 2023.10.06 |
