1. setTimeout()
일정 시간이 지난 후 매개변수로 제공된 함수를 실행
const 상수명 = function(){
실행문;
}
const st = setTimeout(상수명, 밀리초);
2. clearTimeout()
일정 시간 후에 일어날 setTimeout()을 취소함
const hello = function(){
console.log('hello')
}
const st = setTimeout(hello,5000);
clearTimeout(st);
3. setInterval()
일정 시간마다 매개변수로 제공된 함수를 실행
const hello = function() {
console.log('안녕하세요.JavaScript')
}
const si = setInterval(hello, 3000)
4. clearInterval()
일정 시간마다 일어날 setInterval()을 취소함
문제. 현재 시간을 출력하는 문서를 만들어보자.
(단, 시작 버튼을 누르면 콘솔에 현재 시간을 초마다 출력하고, 중지 버튼을 누르면 시간이 정지됨, 다시 시작을 누르면 시간이 다시 출력됨)
<button onclick="startClock()">시작</button>
<button onclick="stopClock()">중지</button>
<script>
let si
function makeClock(){
const date = new Date()
yy = date.getFullYear()
MM = date.getMonth()+1
dd = date.getDate()
hh = date.getHours()
mm = date.getMinutes()
ss = date.getSeconds()
console.log(`${yy}-${MM}-${dd}-${hh}-${mm}-${ss}`)
}
function startClock() {
si = setInterval(makeClock, 1000)
}
function stopClock() {
clearInterval(si)
console.log('종료!')
}
</script>
✔️ si라는 전역 변수를 사용한 이유는 setInterval 및 clearInterval 함수가 서로 다른 함수에서 접근할 수 있도록 동일한 변수를 공유하기 위함입니다. setInterval 및 clearInterval 함수가 서로 다른 함수에서 호출되므로 이들 간에 데이터를 공유하려면 전역 변수를 사용해야 합니다. si 변수는 이러한 데이터 공유를 허용합니다.
'웹 > JavaScript' 카테고리의 다른 글
Node 메서드 (0) | 2023.10.29 |
---|---|
Form객체/Document 객체 등 (1) | 2023.10.29 |
프로토타입/상속 (0) | 2023.10.28 |
자바스크립트(배열/함수) (0) | 2023.10.21 |
자바스크립트(연산자/조건문/반복문) (0) | 2023.10.21 |