제이쿼리 setInterval,clearInterval 예제
※setInterval 이란...
간단히 설명하자면 '시간 카운터' 입니다.
원하는 단위만큼 시간을 증가시키거나 감소시킬 수 있는 함수이죠.
이 함수는 대부분 시간제한이 있는 게임같은 컨텐츠에서 사용하거나, 일정 시간마다 데이터를 업데이트 시킬 경우에 많이 사용합니다.
예제를 통해서 setInterval 함수를 활용하는 방법에 대해 알아보도록 하죠.
※setInterval 사용법
var timeLimit = setInterval(function(){
사용자가 정의한 동작
}, 시간단위);
※setInterval 예제
시간을 1초 단위로 카운트를 하여 0초가 되면 메시지를 띄우는 예제.
(1)스크립트 코드
$(window).ready(function(){
var time = 5;
var limit = 0;
var timeLimit = setInterval(function(){
//시간감소
time--;
if(time == limit){
alert("타임업");
}
}, 1000);
});
결과)
코드설명)
time이라는 변수는 5초에서 시작합니다.
limit라는 변수는 0초로 정의합니다.
시간단위를 1000으로 정의합니다. 1000은 1초를 의미합니다. 즉 1초마다 time-- 1초씩 감산합니다.
time과 limit가 같은초가 되면 "타임업" 이라는 메시지를 띄웁니다.
※setInterval 응용
시간을 1초 단위로 증가를 하면서 현재 증가중인 시간을 표시하는 예제.
(1)스크립트 코드
$(window).ready(function(){
var time = 0;
var timeLimit = setInterval(function(){
//시간증가
time++;
$("#text").html(time);
}, 1000);
});
(2)html 코드
<body>
<p id="text">0</p>
</body>
결과)
코드설명)
time이라는 변수는 0초부터 1초당 1씩 증가합니다.
증가할 때 마다 <p id="text"> 태그에 html 값을 변경합니다.
즉 time은 계속 증가하고 그 1초마다 증가하는 값을 표시해 줍니다.
※clearInterval 예제
clearInterval은 setInterval로 정의한 시간을 중지 시키는 함수입니다.
(1)스크립트 코드
$(window).ready(function(){
var time = 0;
limit = 10;
var timeLimit = setInterval(function(){
//시간증가
time++;
$("#text").html(time);
if(time == limit){
clearInterval(timeLimit);
$("#text").html("시간종료");
}
}, 1000);
});
(2)html 코드
<body>
<p id="text">0</p>
</body>
결과)
코드설명)
time이라는 변수는 0초부터 1초당 1씩 증가합니다.
증가할 때 마다 <p id="text"> 태그에 html 값을 변경합니다.
하지만 limit인 10과 값이 같아지면 "시간종료"라는 텍스트를 표시합니다.
전체코드)
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(window).ready(function(){
var time = 0;
limit = 10;
var timeLimit = setInterval(function(){
//시간증가
time++;
$("#text").html(time);
if(time == limit){
clearInterval(timeLimit);
$("#text").html("시간종료");
}
}, 1000);
});
</script>
<body>
<p id="text">0</p>
</body>
</html>
제이쿼리 setInterval,clearInterval.. 이 포스트가 유익하셨다면 
부탁드려요 :)
'코딩이야기 > jQuery' 카테고리의 다른 글
| 제이쿼리 ajax 예제 (0) | 2017.01.18 |
|---|---|
| 제이쿼리 폼 검사 text/radio/checkbox/이메일검증 (1) | 2016.12.15 |
| 제이쿼리 사용법/개념/선택자 (0) | 2016.11.11 |