1. 한 번만 실행되는 타이머
다음과 같이 코드 코드를 복사합니다.
<스크립트>
//타이머는 비동기적으로 실행됩니다.
함수 안녕하세요(){
Alert("안녕하세요");
}
//메소드 이름을 사용하여 메소드 실행
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//문자열 실행 방법 사용
window.clearTimeout(t1);//타이머 제거
</script>
2. 반복 실행 타이머
다음과 같이 코드 코드를 복사합니다.
<스크립트>
함수 안녕하세요(){
Alert("안녕하세요");
}
// 메소드 반복
var t1 = window.setInterval(hello,1000);
var t2 = window.setInterval("hello()",3000);
//타이머를 제거하는 방법
window.clearInterval(t1);
</script>
주목:
페이지에 두 가지 메소드가 있는데, 둘 다 페이지가 로드된 후에 실행되지만 실제로는 순서대로 실행되지 않는 경우 다음 방법을 참조하여 문제를 해결할 수 있습니다.
onload 메서드에 타이머를 추가하고 타이머를 설정한 후 실행하기 전에 일정 시간 동안 "지연"할 수 있습니다. 이는 페이지 로드 순서와 메서드 실행 순서를 구별하는 것으로 간주할 수 있습니다.
JavaScript에는 타이머 전용 함수가 두 개 있습니다.
1. 카운트다운 타이머: timename=setTimeout("function();",delaytime);
2. 루프 타이머: timename=setInterval("function();",delaytime);
첫 번째 매개변수인 "function()"은 타이머가 트리거될 때 실행되는 동작입니다. 하나의 함수일 수도 있고, 여러 함수를 ";"로 구분할 수도 있습니다. 예를 들어 두 개의 경고 창을 표시하려면 "function();"을 다음과 같이 바꿀 수 있습니다.
"alert('첫 번째 경고 창!');alert('두 번째 경고 창!');"; 두 번째 매개변수 "delaytime"은 밀리초 단위의 간격 시간입니다. 즉, "5000"을 입력하면 5초를 의미합니다.
카운트다운 타이머는 지정된 시간에 도달한 후 이벤트를 트리거하는 반면, 루프 타이머는 간격 시간에 도달하면 이벤트를 반복적으로 트리거하는 반면, 두 타이머의 차이점은 전자는 한 번만 작동하고 후자는 지속적으로 작동한다는 것입니다.
예를 들어, 페이지를 열고 몇 초마다 자동으로 다른 페이지로 이동하려면 카운트다운 타이머 "setTimeout("function();",delaytime)"을 사용해야 하며, 특정 문장을 설정하려면 하나둘 등장하고,
루프 타이머 "setInterval("function();",delaytime)"을 사용해야 합니다.
양식의 포커스를 얻으려면 document.activeElement.id가 사용됩니다. document.activeElement.id와 양식 ID가 동일한지 확인하려면 if를 사용하세요.
예: if ("mid" == document.activeElement.id) {alert();}, "mid"는 양식에 해당하는 ID입니다.
시간제 노동자:
특정 시간 후에 실행될 프로그램을 지정하는 데 사용됩니다.
JS에서의 타이밍 실행, setTimeout과 setInterval의 차이점 및 취소 방법
setTimeout(Expression,DelayTime), DelayTime 이후에 setTimeout은 작업을 수행하기 전에 일정 시간 동안 지연하는 데 사용됩니다.
setTimeout("function",time)은 시간 초과 개체를 설정합니다.
setInterval(expression, DelayTime), 각 DelayTime은 표현식을 실행하는 데 자주 사용됩니다.
setInterval("function",time)은 시간 초과 개체를 설정합니다.
SetInterval은 자동으로 반복되고 setTimeout은 반복되지 않습니다.
clearTimeout(object)는 설정된 setTimeout 객체를 지웁니다.
ClearInterval(object)은 setInterval 객체를 지웁니다.
두 가지 예만 들어보세요.
예시 1. 양식이 트리거되거나 로드되면 문자열을 그대로 출력합니다.
다음과 같이 코드 코드를 복사합니다.
<html>
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>제목 없는 문서</title>
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
var str = "테스트용 샘플 텍스트입니다.";
var 순서 = 0;
var second=1000; //간격 1초
함수 스크롤() {
msg = str.substring(0, seq+1);
document.getElementByIdx_x_x('word').innerHTML = msg;
순서++;
if (seq >= str.length) seq = 0;
}
</script>
</head>
<body onload="setInterval('scroll()',second)">
<div id="단어"></div><br/><br/>
</body>
</html>
예시 2. 입력 상자에 포커스가 있을 때 입력 상자 정보를 정기적으로 확인하고, 포커스가 맞지 않을 때는 확인 작업을 수행하지 않습니다.
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>제목 없는 문서</title>
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
var second=5000; //간격 5초
var c=0;
함수 스크롤() {
c++;
if ("b" == document.activeElement.id) {
var str="예약된 확인<b> "+c+" </b>시간<br/>";
if(document.getElementByIdx_x_x('b').value!=""){
str+="입력 상자의 현재 내용은<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>"입니다.
}
document.getElementByIdx_x_x('word').innerHTML = str;
}
}
</script>
</head>
<본문>
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/ >
<div id="단어"></div><br/><br/>
</body>
</html>
예제 3. 다음은 타이머가 만료된 후 경고 창이 팝업되는 가장 간단한 예입니다.
다음과 같이 코드 코드를 복사합니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<스크립트 언어="자바스크립트">
함수 카운트() {
document.getElementByIdx_x_x('m').innerHTML="타이머가 시작되었습니다!";
setTimeout("alert('10초 전!')",10000)
}
</script>
<본문>
<div id="m"></div>
<input TYPE="button" value="타이머 시작" onclick="count()">
</body>
</html>
예시 4: 카운트다운 시간 점프
다음과 같이 코드 코드를 복사합니다.
<html>
<머리>
<base href="<%=basePath%>">
<title>내 JSP 'ds04.jsp' 시작 페이지</title>
<span id="tiao">3</span>
<a href="javascript:countDown"> </a> 몇 초 후에 자동으로 점프합니다...
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
<!--스크립트 시작-->
<스크립트 언어="javascript" 유형="">
함수 countDown(초){
tiao.innerText=초;
if(--초>0)
setTimeout("countDown("+secs+")",1000);
}
카운트다운(3);
</script>
<!--스크립트 끝-->
</head>
예시 6:
다음과 같이 코드 코드를 복사합니다.
<머리>
<meta http-equiv="refresh" content="2;url='b.html'">
</head>
예시 7:
다음과 같이 코드 코드를 복사합니다.
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
setTimeout("window.location.href='b.html'", 2000);
//다음 두 가지 모두 사용할 수 있습니다.
//setTimeout("javascript:location.href='b.html'", 2000);
//setTimeout("window.location='b.html'", 2000);
</script>
예시 8:
다음과 같이 코드 코드를 복사합니다.
<span id="totalSecond">2</span>
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
var second = document.getElementByIdx_x('totalSecond').innerHTML;
if(isNaN(초)){
//...수치 처리 방법이 아닙니다.
}또 다른{
setInterval(함수(){
document.getElementByIdx_x('totalSecond').innerHTML = --second;
if (초 <= 0) {
window.location = 'b.html';
}
}, 1000);
}
</script>