티스토리 뷰

(기초)그래서 뭘 배운거야?/JavaScript

JS-83-timer : 시간 설정 후 이벤트 발생 및 이벤트 삭제

Soheny.P 2021. 9. 28. 20:43
728x90

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">5초 뒤에 뭔가 나올거야!!!</button>
    <button id="cancel">나오지 않도록 해줄게.. 짜증나</button>

    <script>
        let setTo= null;

        document.getElementById("btn").addEventListener("click",function(){
            // setTimeout자체를 setTo라는 변수의 인자로 받기
            setTo = setTimeout(function() {
                alert(`배고파!!!!!!!!!!!!!!!!!!!!!!!`);
            }, 5000);
        });

        document.getElementById("cancel").addEventListener("click",function(){
            // clearTimeout : setTimeout지우는 함수
            clearTimeout(setTo);
        });
    </script>
</body>

</html>

 

 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="access">3초마다 글 추가됨</button>
    <button id="cancel">글 추가 취소시키기</button>
    <div id="content"></div>

    <script>
        // null로 초기화
        let eventTime = null;


        document.getElementById("access").addEventListener("click",function(){
            eventTime = setInterval(function() {
                const p = document.createElement("p");
                const text = document.createTextNode(`오늘은 해물라면`);
                p.append(text);
        
                document.getElementById("content").append(p);
            }, 3000);
        });

        document.getElementById("cancel").addEventListener("click",function(){
            clearInterval(eventTime);
        });
    </script>
</body>

</html>
728x90
저작자표시 비영리 변경금지 (새창열림)

'(기초)그래서 뭘 배운거야? > JavaScript' 카테고리의 다른 글

JS-84-time : 날짜 함수  (0) 2021.09.28
JS-82-addEventListener : 누르면 이벤트 발생  (0) 2021.09.28
JS-81-Arrow + this  (0) 2021.09.28
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/08   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함