JavaScript 타이밍 제어, Timing 이벤트

JavaScript Timing Events

JavaScript는 간단한 코드로 시간 간격을 조절할 수 있다. 이것을 timing 이벤트라고 한다.

두가지 함수를 제공하며 사용법은 아주 간단하다.

• setInterval() - 지정한 함수를 지정한 시간 간격으로 호출한다.
• setTimeout() - 지정한 시간 후에 지정한 함수를 호출한다.

Note: setInterval() 와 setTimeout() 는 모두 HTML DOM Window 객체의 함수이다.

---

The setInterval() Method

setInterval() method의 시간 단위는 milliseconds 이다. 이 함수는 주어진 함수를 주기적으로 계속 호출한다.

Syntax

window.setInterval("javascript function",milliseconds);

window.setInterval() 함수는 window prefix를 생략하고 사용할 수 있다.

첫번째 parameter는 함수명이다.

두번째 parameter는 시간 간격이다.

Note: 1000 milliseconds 는 1초이다.

Example

3초에 한번씩 "hello" 알림창을 띄워보자.

setInterval(function(){alert("Hello")},3000);

Try it yourself »

위 예제로 setInterval() 함수 사용법을 알 수 있다. 그러나 3초마다 한번씩 알림창을 지속적으로 보고 싶은 사람은 없다. 언능 종료하자.

아래 코드는 setInterval() 함수를 이용하여 전자시계를 구현하는 예제이다.

Example

Display the current time:

function myFunction()
{
setInterval(function(){myTimer()},1000);
}

function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}

Try it yourself »

How to Stop the Execution?

clearInterval() 함수를 이용하면 setInterval() 함수의 사용을 중지시킬 수 있다.

Syntax

window.clearInterval(intervalVariable)

window.clearInterval() 는 window prefix를 생략하고 사용할 수 있다.

clearInterval() 함수를 사용하기 위해 전역변수(global variable) 하나를 선언하고 setInterval() 함수에서 할당 받아놔야 한다.

myVar=setInterval("javascript function",milliseconds);

그 다음 clearInterval() 함수에서 setInterval() 함수 사용을 myVar를 통해서 멈출 수 있다. 아래 예제를 보자.

Example

"Stop the timer" 를 누르면 멈춘다.

var myVar;

function myFunction()
{
myVar=setInterval(function(){myTimer()},1000);
}

function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}

function myStopFunction()
{
clearInterval(myVar);
}

Try it yourself »

---

The setTimeout() Method

Syntax

window.setTimeout("javascript function",milliseconds);

window.setTimeout() 는 window prefix를 생략할 수 있다.

setTimeout() 함수의 시간 단위는 millisecond이다,

첫번째 parameter는 함수이다.

두번째 parameter 시간이다. 해당 시간이 흐른 후 첫번째 파라미터인 함수가 호출된다.

Example

3초 후에 "Hello" 알림창을 띄워보자.

setTimeout(function(){alert("Hello")},3000);

Try it yourself »

How to Stop the Execution?

clearTimeout() 함수를 사용해서 setTimeout() 사용을 중지시킬 수 있다.

Syntax

window.clearTimeout(timeoutVariable)

clearTimeout() 함수는 전역변수로 사용할 수 있다.

myVar=setTimeout("javascript function",milliseconds);

setTimeout으로 받아 놓은 myVar 변수를 전달해서 중지 시킨다.

Example

var myVar;

function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}

function myStopFunction()
{
clearTimeout(myVar);
}

Try it yourself »

---

More Examples

Another simple timing

A clock created with a timing event