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>

Last updated