[Window_Object] JS - setInterval() 메서드 ★★★ - 일정 시간 후 자동 반복 실행. (= setInterval메서드 = 셋인터벌) ※ 일정 시간 후 얼럿창 띄우기 ※ 마감 종료 전 남은 날짜시간 표시 (= D-day = Dday = 디데이)

1. setInterval() 예제 - 1초마다 텍스트 표시
2. setInterval() 정의
3. setInterval() 구문
4. setInterval() 예제 - 3초 후 경고창 띄우기
5. setInterval() 예제 - 남은 날짜 표시 (= D-day = 디데이)
6. setInterval() 예제 - 디지털 시계 (시간 멈춤 기능 X)
7. setInterval() 예제 - 디지철 시계 (시간 멈춤 기능 O)
8. setInterval() 예제 - 진행바/진도바 (애니 효과 적용 O)
9. setInterval() 예제 - 0.5초마다 배경색 변경 (= 배경 깜빡깜빡)
10. setInterval() 예제 - 함수로 매개변수 전달 방법

※ 일정 시간 후 어떤 행위를 반복해서 하게 할 때 사용.

setInterval() 예제 - 1초마다 텍스트 표시

[방법1] - 함수 이용 X

 

<p id="hz"></p>

<script>

const hz = document.getElementById("hz");

setInterval(function() {hz.innerHTML += "홈짱닷컴 Homzzang.com<br>"}, 1000);

</script>

 

결과보기

---

[방법2] - 함수 이용 O

 

<p id="hz"></p>

<script>

setInterval(homzzang, 1000);

function homzzang() {

  document.getElementById("hz").innerHTML += "홈짱닷컴 Homzzang.com<br>";

}

</script>

 

결과보기

setInterval() 정의

 

지정된 간격(밀리초)으로 함수를 호출.

 

---

 

1.

함수 호출은 아래 경우 발생 때까지 지속.

• clearInterval() 메서드 호출
• window 창 닫힘

 

2.

1 second(초) = 1000 milliseconds(밀리초)

 

3. cf.

setTimeout() 메서드 - 함수 1회만 실행.

 

4. clearInterval() 메서드 사용법
id = setInterval(function, milliseconds);

clearInterval(id);

 

5. 관련 메서드

• setInterval() 메서드 - 일정 시간마다 반복해 함수 실행
• clearInterval() 메서드 - setInterval() 해제
• setTimeout() 메서드 - 1회만 함수 실행
• clearTimeout() 메서드 - setTimeout() 해제

 

6.

모든 브라우저 지원.

 

7. MDN setInterval() 예제 보기

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

 

setInterval() 구문

 

방법1 - IE9 이하 경우 작동 X

setInterval(myFunc, milliseconds, param1, param2, ...)

 

방법2 - 모든 브라우저 작동 O
setInterval(function() {myFunc("param1", "param2")}, milliseconds)

---

[매개변수]

 

myFunc

필수. 실행할 함수

 

milliseconds

필수. 밀리초 (1/1000초) ※ 10보다 작으면, 10 사용.

param1, param2, ...

선택. 함수로 전달할 매개변수

• 방법1 경우, IE9 이하 지원 X
• 방법2 경우, 모든 브라우저 지원 O

 

---

[반환값]

 

타이머 id를 숫자로 반환.

※ 해당 id를 clearInterval(id) 매서드에 전달해 반복 멈춤.

 

setInterval() 예제 - 3초 후 경고창 띄우기

 

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

 setInterval(function(){ alert("홈짱닷컴 Homzzang.com"); }, 3000);

}

</script>

 

결과보기

※ 클릭 후 3초 후에 홈짱닷컴 Homzzang.com 얼럿창 뜸. 확인 누르면 계속 3초 후 뜸.

setInterval() 예제 - 남은 날짜 표시 (= D-day = 디데이)

 

<style>

#endcount {color:red;}          

</style>

<?php

$end_day = "2021-12-31 23:59:59"; // 마감날짜

?>

<p id="endcount"></p>

<script>

var endDatetime = new Date("<?php echo $end_day?>").getTime();

var x = setInterval(function() {

    var now = new Date().getTime();

    var leftTime = endDatetime - now;

    var dd = Math.floor(leftTime / (1000 * 60 * 60 * 24));

    var hh = Math.floor((leftTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

    var mm = Math.floor((leftTime % (1000 * 60 * 60)) / (1000 * 60));

    var ss = Math.floor((leftTime % (1000 * 60)) / 1000);

 

    document.getElementById("endcount").innerHTML ="남은 시간: "+ dd + "일 " + hh + "시간 " + mm + "분 " + ss + "초";

    if (leftTime < 0) {

        clearInterval(x);

        document.getElementById("endcount").innerHTML = "마감";

    }

}, 1000);

</script>

 

둘레아빠 님 (211211) https://sir.kr/qa/441621

setInterval() 예제 - 디지털 시계 (시간 멈춤 기능 X)

 

<p id="demo"></p>

<script>

setInterval(homzzang, 1000);

function homzzang() {

  const date = new Date();

  document.getElementById("demo").innerHTML = date.toLocaleTimeString();

}

</script>

 

결과보기

setInterval() 예제 - 디지철 시계 (시간 멈춤 기능 O)

 

<p id="demo"></p>

<button onclick="stopTime()">시간멈추기</button>

<script>

const hz = setInterval(homzzang, 1000);

function homzzang() {

  const date = new Date();

  document.getElementById("demo").innerHTML = date.toLocaleTimeString();

}

function stopTime() {

  clearInterval(hz);

}

</script>

 

결과보기

setInterval() 예제 - 진행바/진도바 (애니 효과 적용 O)

 

<style>

#hz {

  width: 100%;

  height: 30px;

  position: relative;

  background-color: silver;

}

#bar {

  background-color: blue;

  width: 10px;

  height: 30px;

  position: absolute;

}

</style>

<div id="hz">

  <div id="bar"></div>

</div>

<br>

<button onclick="homzzang()">클릭</button> 

<script>

function homzzang() {

  const bar = document.getElementById("bar");   

  let width = 0;

  const pgs = setInterval(progress, 10);

  function progress() {

    if (width == 100) {

      clearInterval(pgs);

    } else {

      width++; 

      bar.style.width = width + '%'; 

    }

  }

}

</script>

 

결과보기

setInterval() 예제 - 0.5초마다 배경색 변경 (= 배경 깜빡깜빡)

 

<button onclick="stopColor()">토글 멈추기</button>

<script>

hz = setInterval(homzzang, 500);

 

function homzzang() {

  let x = document.body;

  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";

}

 

function stopColor() {

  clearInterval(hz);

}

</script>

 

결과보기

setInterval() 예제 - 함수로 매개변수 전달 방법

[올바른 방법]

 

<p id="demo1"></p>

<p id="demo2" style="color:red;"></p>

<script>

setInterval(function() {homzzang("홈짱닷컴", "Homzzang.com")}, 2000);

function homzzang(a, b) {

  document.getElementById("demo1").innerHTML += a + " " + b + "<br>";

  document.getElementById("demo2").innerHTML = "매개변수: " + a + " " + b;

}

</script>

 

결과보기

---

[틀린 방법] - 아래처럼 하면, IE9 이하 경우 작동 X

 

<p id="demo1"></p>

<p id="demo2" style="color:red;"></p>

<script>

setInterval(homzzang, 2000, "홈짱닷컴", "Homzzang.com");

function homzzang(a, b) {

  document.getElementById("demo1").innerHTML += a + " " + b + "<br>";

  document.getElementById("demo2").innerHTML = "매개변수: " + a + " " + b;

}

</script>

 

결과보기