비동기
setTimeout
- 비동기함수
setTimeout
-> 코드를 순서대로 진행시키는게 아닌 시간차로 진행시킬 수 있게 함
setTimeout(() => {
for (let i = 0; i < 3; i++) {
console.log(`hello${i}`);
}
}, 2000); // 밀리초: 1 / 1000초
setTimeout(() => {
for (let i = 0; i < 4; i++) {
console.log(`bye${i}`);
}
}, 0);- 코드는 일반적으로 위에서 아래로 진행하게 되는데 위 for문에는 setTimeout으로 2초 후에 나오게 설정하여 아래코드가 먼저 진행되게함
clearTimeout
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="start">시작</button>
<button id="cancel">취소</button>
<p class="msg"></p>
<script>
const $start = document.getElementById("start");
const $cancel = document.getElementById("cancel");
const $msg = document.querySelector(".msg");
// 타이머를 변수에 저장
let timer = null;
$start.addEventListener("click", (e) => {
if (timer) { // 타이머 대기열이 존재한다면
clearTimeout(timer); // 대기열 취소
}
// 메시지 초기화
$msg.textContent = "";
timer = setTimeout(() => {
$msg.textContent += "ㅎㅇㅎㅇ?";
timer = null; // 타이머 실행 후 초기화
}, 2000);
$cancel.addEventListener("click", (e) => {
if (timer) {
clearTimeout(timer); // 타이머 취소
$msg.textContent = "메시지가 취소되었습니다.";
timer = null;
}
});
});
</script>
</body>
</html>- 2초 후에 text를 담는 timer라는 변수를 생성 -> 여러 번 눌러서 timer에 대기열이 생긴다면 clearTimeout()를 통해 대기열들 취소 가능
-> 즉, clearTimeout()를 걸어준다면 수십 번을 눌러도 한 번만 출력 가능!
setInterval
- 설정한 시간 주기로 계속 출력됨
-> 시간, 날짜, 반복해서 나와야하는 것 등에 쓰임
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="msg"></p>
<p id="clock"></p>
<script>
const $msg = document.querySelector('.msg');
// setInterval(() => {
// $msg.textContent += '안뇽~~\n';
// }, 500);
const $clock = document.getElementById('clock');
// 현재 시간 가져오기
// console.log(now.toLocaleTimeString());
setInterval(() => {
const now = new Date();
$clock.textContent = now.toLocaleTimeString();
}, 1000);
</script>
</body>
</html>clearInterval
- 정지하는 역할
-> ex) 타이머 정지
백엔드 개발자