• Q&A
  • 회원가입
  • 로그인

[BOM] JS - Timing Events ★ - 시간간격 코드실행 (= 타이밍 이벤트 = 시간이벤트 = 일정시간별 코드실행)

872  

Timing Event 개념 

 

타이밍 이벤트 : window 객체가 지정된 시간 간격에 코드 실행 가능한데, 이 시간 간격 의미. 

 


 

1.

대표적인 JS 타이밍 이벤트 메서드 2개.

 

setTimeout(function, milliseconds)

지정된 밀리 초 동안 기다렸다가 함수 실행.


setInterval(function, milliseconds)

setTimeout ()과 동일하지만, 함수 실행을 계속 반복.

 

2.

위 2 메서드 모두 window 객체의 메서드임.

 

 

 

1-1. setTimeout() 메서드 - 일정시간 후 함수 실행

 

window.setTimeout(function, milliseconds);

 

※ window.setTimeout() 메서드는 window 접두사없이 사용 가능.


 

[매개변수]

 

function

필수. 실행할 함수.

 

milliseconds

선택. 밀리초 (1초 : 1000)

 


 

<button onclick="setTimeout(homzzang, 3000);">클릭</button>


<script>

function homzzang() {

  alert('홈짱닷컴 Homzzang.com');

}

</script>

 

결과보기

 

 

1-2. clearTimeout() 메서드 - setTimeout() 실행중지

 

hzVar = setTimeout(function, milliseconds);

clearTimeout(hzVar);

 


 

1.

clearTimeout() 메서드는 setTimeout()에 지정된 함수의 실행을 중지시킴.

 

2.

window.clearTimeout() 메서드는 window 접두사없이 사용 가능.


3.

clearTimeout() 메서드의 매개변수 : setTimeout() 메서드 반환 결과가 담긴 변수를 매개변수로 사용.

 

4.

함수가 아직 실행되지 않은 경우, clearTimeout() 메서드 호출해 실행 중지 가능.

 


 

※ 실행 버튼 클릭 후 3초 전에 중지 버튼 클릭 시 함수 실행 막을 수 있음.

 

<button onclick="hzVar = setTimeout(homzzang, 3000)">실행</button>

<button onclick="clearTimeout(hzVar)">중지</button>


<script>

function homzzang() {

  alert("홈짱닷컴 Homzzang.com");

}

</script>

 

결과보기


 

2-1. setInterval() 메서드 - 일정시간마다 함수 실행

 

window.setInterval(function, milliseconds);

 

[매개변수]

 

function

실행할 함수

 

milliseconds

각 실행 사이의 시간 간격을 나타내는 밀리초. (1초 = 1000 밀리초)

 


 

1.

setInterval() 메서드는 주어진 시간 간격마다 주어진 함수를 반복 실행.

 

2.

window.setInterval() 메서드는 window 접두사 없이 사용 가능.

 


 

※ 매초마다 "hzTimer" 함수 (예 : 디지털 시계) 실행. 

 

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


<script>

var myVar = setInterval(hzTimer, 1000);


function hzTimer() {

  var d = new Date();

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

}

</script>

 

결과보기  (예) 오전 2:07:18

 

 

2-2. clearInterval() 메서드 - setInterval() 실행중지

 

hzVar = setInterval(function, milliseconds);

window.clearInterval(hzVar); 

 


 

1.

clearInterval() 메서드는 setInterval() 메서드 지정된 함수의 실행을 중지시킴.

 

2.

window.clearInterval() 메서드는 window 접두사 없이 사용 가능.


3.

clearInterval() 메서드의 매개변수는 setInterval() 메서드의 반환 결과가 담긴 변수.

 


 

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


<button onclick="clearInterval(hzVar)">중지</button>


<script>

var hzVar = setInterval(hzTimer ,1000);

function hzTimer() {

  var d = new Date();

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

}

</script>

 

결과보기

 

 

2초마다 시간 표시

 

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


<p id="demo">홈짱닷컴 Homzzang.com</p>


<script>

function timedText() {

  setTimeout(hzTimeout1, 2000) 

  setTimeout(hzTimeout2, 4000) 

  setTimeout(hzTimeout3, 6000) 

}

function hzTimeout1() {

  document.getElementById("demo").innerHTML = "2 초";

}

function hzTimeout2() {

  document.getElementById("demo").innerHTML = "4 초";

}

function hzTimeout3() {

  document.getElementById("demo").innerHTML = "6 초";

}

</script>

 

결과보기

 

 

디지털시계 (예제: 01:41:55)

 

<script>

function hzTime() {

  var today = new Date();

  var h = today.getHours();

  var m = today.getMinutes();

  var s = today.getSeconds();

  h = checkTime(h);

  m = checkTime(m);

  s = checkTime(s);

  document.getElementById('hz').innerHTML = h + ":" + m + ":" + s;

  var t = setTimeout(hzTime, 500);

}

function checkTime(i) {

  if (i < 10) {i = "0" + i};  // 10 보다 작은 수 앞에 0 추가.

  return i;

}

</script>


<body onload="hzTime()">


<div id="hz"></div>

 

결과보기 (예) 01:41:55



찾아주셔서 감사합니다. Since 2012