setTimeout

JavaScript 기본 함수 중 setTimeout() 에 대해서 알아보자

이건 n초 후 코드를 실행해준다.

setTimeout(function() { 실행할 코드} , 시간);

시간은 ms단위 (1초는 1000ms)

js008.html을 복사해 js010.html을 만들어 봅시다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

  <link rel="stylesheet" href="main.css">
  <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

</head>
<body>

<div class="black-bg1">
  <div class="white-bg">
    <h4>로그인하세요</h4>
    <form >
      <div class="mb-3">
        <input type="text" class="form-control" id="email">
      </div>
      <div class="mb-3">
        <input type="password" class="form-control" id="password">
      </div>
      <button type="submit" id="submit" class="btn btn-primary">Submit</button>
      <button type="button" class="btn btn-danger" id="close">닫기</button>
    </form>

  </div>
</div>

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <span class="badge bg-dark ms-auto mx-3">Dark 🌛</span>
    <button class="navbar-toggler" type="button">
      <span class="navbar-toggler-icon "></span>
    </button>
  </div>
</nav>

<ul class="list-group" id="list1">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

<button id="loginBtn" type="button" class="btn btn-primary">
  버튼
</button>



<script>
  $('#loginBtn').on('click', function(){
    $('.black-bg1').addClass('show-modal1');

  });

  $('#close').on('click', function() {
    $('.black-bg1').removeClass('show-modal1');
  })

  $('.navbar-toggler').on('click', function() {
    $('.list-group').toggleClass('lg-open');
  });


  $('form').on('submit', function (e){
    console.log(document.getElementById('email').value);
    if($('#email').val() == ''){
      alert('아이디를 입력하세요');
      e.preventDefault();  // 폼 전송 막는 코드
    }

    if($('#password').val() == ''){
      alert('패스워드를 입력하세요');
    }else if($('#password').val().length <4){
      alert('패스워드는 4자 이상이어야 합니다.');
    }


  });


  //badge 클릭 시 글자를 Dark > Light 변경

  var count = 0;
  $('.badge').on('click', function (){
    count++;
    // count += 1;
    // count = count+1;
    console.log(count);
    console.log(count % 2);

    if(count % 2 === 0){
      $('.badge').html('Dark 🌛');
      $('.navbar').removeClass('navbar-dark');
      $('.navbar').removeClass('bg-dark');
      $('.navbar').addClass('navbar-light')
      $('.navbar').addClass('bg-light')
    }else if(count %2 === 1){
      $('.badge').html('Light 🌞');
      $('.navbar').removeClass('navbar-light');
      $('.navbar').removeClass('bg-light');
      $('.navbar').addClass('navbar-dark')
      $('.navbar').addClass('bg-dark')
    }
  });

 


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>

불필요한 console 이나 script는 삭제하고 아래의 코드를 html 마지막에 추가

<div class="alert alert-danger">
  5초 이내에 구매 시 사은품 증정!
</div>

 setTimeout(function (){
    //실행할 코드
    console.log("setTimeout 확인");

  }, 2000)

이렇게 하면 2초 뒤에 console에 'setTimeout 확인' 메세지가 찍힌다.

2000 을 변경해서 원하는 시간에 메세지가 출력되도록 해보자.

setInterval(function() {
    console.log("setInterval 확인");
}, 1000);

이렇게 하면 1초마다 메세지가 출력된다.

✨ 실습. 5초 후에 아래의 div 를 사라지게 해보자.

<div class="alert alert-danger">
  5초 이내에 구매 시 사은품 증정!
</div>

setTimeout(function (){
    $('.alert').hide();
}, 5000)

🎈콜백함수 다른 사용법

지금까지 addEventListener, setTimeout, setInterval 등 콜백함수를 사용하는 메서드를 사용했습니다.

//1. 지금까지 사용한 방식
setTimeout(function(), 1000){
    //코드 작성
}

//2. 이렇게도 쓸 수있다.

function exampleFun() {
    console.log("test");
}

setTimeout(exampleFun, 1000);

✨ 과제. 위에서 만든 <div> 안에 1초마다 5라는 문자를 1씩 감소 시키고 0이되면 <div>를 안보이게 해보자.


<div class="alert alert-danger">
    <span id="sec">5</span>초 이내에 구매 시 사은품 증정!
</div>



<script>
    var second = 5;
    var timer = function() {
        console.log(second);
        if(second > 0 ){
            second--;
            $("#sec").html(second);
        }else {
            $('.alert').hide();
            clearInterval(timerVar);
        }
    };
    
    var timerVar = setInterval(timer, 1000);
</script>

Previous변수의 선언과 할당, let const Nextinclude와 정규식

Last updated 2 years ago