[CodingApple] Timeout 만들기

Nadia·2024년 2월 25일

CodingApple

목록 보기

8/20

setTimeout 만들기

n초 후 코드 실행

setTimeout(function(){}, ms)
: ms초 후에 function이 실행된다.

setTimeout(function() {
    코드
}, ms);

밀리초 단위: 1,000ms → 1s
function은 콜백(call back)함수
콜백 함수 자리엔 기존 함수를 호출할 수도 있다.

function hi() {
    console.log('안녕')
}

setTimeout(hi, 1000);

addEventListener(hi);

화살표 함수 버전

setTimeout(() => {
     코드 
}, timeout);

n초마다 코드 실행

setInterval(function(){}, ms)
: ms초마다 function이 실행된다.

setInterval(function() {
       코드
}, ms);

타이머(Timer) 멈추기

clearTimeout( );
: 타이머 멈추기, 삭제하기

변수에 타이머 저장하기
var 타이머 = setInterval(function() { }, ms);
타이머를 멈추고 싶을 때 clearTimeout(타이머); 실행하기

Javascript 문법

if, var, function...

Web Browser API

document.querySelector, setTimeout( ), alert( )...

타이머(Timer) 만들기

구현 계획

'5초'를 1초마다 1씩 감소하도록 변경하기
- 초(count) 변수 선언하기
- 초(count) 1씩 감소하기 (count -= 1;)
'0초'가 되면 문구 <div> 숨기기
- none-show class 생성
- 0초가 되면 none-show class 추가

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <!-- 5초 후에 문구를 안 보이게 만들기 -->
    <div class="alert alert-danger">
        <span id="second">
            5
        </span>
        초 이내 구매 시 사은품 증정!
    </div>

    <script src="index.js"></script>
</body>
</html>

index.js

let count = 5; // second

var timer = setInterval(function() {
    count -= 1;

    if (count >= 0) {
        document.getElementById('second').innerHTML = count;
    } else {
        document.getElementsByClassName('alert')[0].classList.add('none-show');
        // clearTimeout(timer); // 타이머 멈추기
    }
}, 1000);