본문 바로가기
프로그래밍/JavaScript

JavaScript 타이밍 제어, Timing 이벤트

by zoo10 2013. 1. 5.

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   

'프로그래밍 > JavaScript' 카테고리의 다른 글

JavaScript 쿠키 Cookies  (0) 2013.01.05
JavaScript Number 객체  (0) 2013.01.05
JavaScript Date 객체  (2) 2013.01.05
JavaScript 배열 객체, Array  (2) 2013.01.05
JavaScript History 객체  (0) 2013.01.05
JavaScript Location 객체  (0) 2013.01.05
JavaScript 스크린 객체  (0) 2013.01.05
JavaScript Navigator 객체  (0) 2013.01.05