JS 타이머 사용 (인스턴스 설명)

저자：Eve Cole 업데이트 시간：2025-03-16 21:32:01

Javascritp에는 타이머에 대한 두 가지 특수 기능이 있습니다.

1. 카운트 다운 타이머 : timename = settimeout ( "function ();", Delaytime);

2. 사이클링 타이머 : timename = setInterval ( "function ();", Delaytime);

첫 번째 매개 변수 "function ()"은 타이머가 트리거 될 때 실행되는 동작입니다. 예를 들어, 두 개의 경고 창이 팝업되면 "function ();

"Alert ( '첫 번째 경고 창!'); Alert ( '두 번째 경고 창!');"Delaytime "은 밀리 초의 간격입니다.

카운트 다운 타이머는 시간이 지나간 후 이벤트를 트리거하고 순환 타이머는 간격이 올 때 이벤트를 반복적으로 트리거하는 것입니다.

예를 들어, 페이지를 열고 몇 초 안에 다른 페이지 간격으로 자동 이동하려면 Countdown 타이머 "Settimeout ("function (); ", Delaytime)을 사용하고 문장을 설정하려는 경우. 한 단어의 모양을 설정하고

원형 타이머 "setInterval ("function (); ", Delaytime"을 사용해야합니다.

양식의 초점을 얻으려면 Document.ActiveElement.Id가 사용됩니다. 문서를 결정하는 경우 사용하십시오. ActiveElement.id 및 양식의 ID가 동일합니다.

예를 들면 다음과 같습니다. if ( "mid"== document.activeElement.id) {alert ();}, "mid"는 양식에 해당하는 ID입니다.

시간제 노동자:

특정 시간 후에 특정 프로그램을 지정하는 데 사용됩니다.

JS의 Settimeout과 SetInterval과 LLEE 방법의 차이점

settimeout (expression, delaytime) 이후에 표현식을 실행하고 일정 기간 동안 Settimeout을 실행 한 다음 특정 작업을 수행합니다.

settimeout ( "function", time) 타임 아웃 객체를 설정합니다

SetInterval (Expression, Delaytime), 각 지연은 종종 표현식을 사용하는 데 사용될 수 있습니다.

setInterVal ( "function"(시간)은 타임 아웃 객체를 설정합니다

SetInterval이 자동으로 반복되고 Settimeout은 반복되지 않습니다.

클리어 타임 아웃

ClearInterval

두 가지 사례.

예 1. 양식이 트리거되거나로드되면 문자열이 단어별로 출력 단어입니다.

다음과 같이 코드 코드를 복사하십시오.

<html>

<헤드>

var str = "이것은 테스트를위한 예제 텍스트입니다";

var seq = 0;

var Second = 1000; // 간격 1 초

함수 스크롤 () {

msg = str.substring (0, seq+1);

document.getElementByIDX_X_X ( 'Word').

seq ++;

if (seq> = str.length) seq = 0;

}

</스크립트>

</head>

</body>

</html>

예제 2. 초점이 입력 상자에있는 경우 입력 상자 정보를 정기적으로 확인하십시오.

다음과 같이 코드 코드를 복사하십시오.

<헤드>

var second = 5000; // 간격 5 초

var c = 0;

함수 스크롤 () {

C ++;

if ( "b"== document.activeElement.id) {{

var str = "타이밍 점검 <b>"+c+"</b> times <br/>";

if (document.getElementByIdx_x_x ( 'b'). value! = "") {

str+= "입력 상자 현재 내용은 현재 내용입니다.

}

document.getElementByIDX_X_X ( 'Word').

}

</스크립트>

</head>

<body>

<textRea id = "b"name = "b"style = "높이 : 100px; 너비 : 300px;" br /> "

</body>

</html>

예 3. 다음은 가장 간단한 예입니다. 타이머 시간이 오면 경고 창이 나타납니다.

다음과 같이 코드 코드를 복사하십시오.

<헤드>

함수 count () {) {

document.getElementByIDX_X_X ( 'm'). "시간이 시작되었습니다!"

settimeout ( "Alert ( '10 초에서!", 10000)

}

</스크립트>

<body>

<입력 유형 = "버튼"value = "time start"onclick = "count ()">

</body>

</html>

예제 4 : 카운트 다운은 타이밍과 적시에 점프합니다

다음과 같이 코드 코드를 복사하십시오.

<html>

<헤드>

<a href = "javaScript : countdown"> </a> 자동으로 두 번째 후에 점프합니다 ...

<!-스크립트가 시작됩니다.>

기능 카운트 다운 (SECS) {

tiao.innertext = secs;

if (-scs> 0)

settimeout ( "countdown ("+secs+"), 1000); 1000);

}

카운트 다운 (3);

</스크립트>

<!-스크립트 end->

</head>

예제 6 :

다음과 같이 코드 코드를 복사하십시오.

<헤드>

</head>

Example 7:

다음과 같이 코드 코드를 복사하십시오.

settimeout ( "window.location.href = 'B.html'", 2000);

// 다음 둘 다 사용할 수 있습니다

// settimeout 18 "javaScript : lcation.href = 'B.html'", 2000);

//settimeout.com Window.location = 'B.html' ", 2000);

</스크립트>

예 8 :

다음과 같이 코드 코드를 복사하십시오.

var second = getElementByIdx_x ( '총체');

if (isnan (second)) {{

// ... 숫자 수가 아닙니다

} 또 다른 {

setInterval (function () {

document.getElementByIdx_x ( 'TotalSecond');

if (두 번째 <= 0) {{

Window.location = 'B.html';

}

}, 1000);

}

</스크립트>

JS 타이머 (한 번 실행, 반복 실행)

JS 타이머의 작은 예제 인 JS 코드를 공유하고 타이머로 나뉘어 실행을 위해 반복 실행 타이머를 공유하십시오. 초보자 인 친구를위한 참조.

1. 타이머를 한 번만 실행하십시오

다음과 같이 코드 코드를 복사하십시오.

<cript>

// 타이머가 비동기식으로 실행됩니다

기능 Hello () {

경고 ( "Hello");

}

// 메소드 이름 실행 방법을 사용합니다

var t1 = window.settimeout (hello, 1000);

var t2 = window.settimeout ( "hello ()", 3000);

Window.clearTimeout (T1); // 타이머를 제거합니다

</스크립트>

2. 반복 실행 타이머

다음과 같이 코드 코드를 복사하십시오.

<cript>

기능 Hello () {

경고 ( "Hello");

}

// 특정 방법을 반복합니다

var t1 = window.setInterval (hello, 1000);

var t2 = window.setInterval ( "hello ()", 3000);

// 타이머를 제거하는 방법

Window.clearInterval (T1);

</스크립트>

주목:

한 페이지에 두 가지 메소드가있는 경우 페이지가로드 된 후에 실행되지만 실제 고장은 순서대로 실행할 수 있습니다.

온라인 방법에 타이머를 추가하고 타이머를 설정 한 다음 일정 기간 동안 "지연"후 실행할 수 있습니다.

다음과 같이 코드 코드를 복사하십시오.

var yc = new Object ();

function beginyc ()

{{

var SecondSyc = getElementById ( "txtycseconds").

노력하다

{{

yc = settimeout ( "Alert ( 'Delay"+SecondSyc+"Second Success'), SecondSyc*1000);

}

캐치 (e)

{{

경고 ( "올바른 두 번째 숫자를 입력하십시오.");

}

function overyc ()

{{

클리어 타임 아웃 (YC);

yc = null;

경고 ( "종료 지연 성공");

}

/**************************↓↓↓↓定时器的使用↓↓↓↓*********** ****************************

var timerds = new Object ();

var timerdds = new Object ();

함수 시작 ()

{{

sn.innerhtml = "0";

TIMERDS = setInterVal ( "addone ()", parseint (docum

}

기능 goonds ()

{{

TIMERDS = setInterVal ( "addone ()", parseint (docum

}

기능 Overds ()

{{

ClearInterval (타이머);

타이머 = null;

}

함수 지연 ()

{{

Overds ();

timerdds = settimeout ( "goonds ()", document.getElementById ( "txtDddsSeconds"). value*1000);

}

함수 addone ()

{{

if (sn.innerhtml == "10")

{{

Overds ();

경고 ( "축하합니다. 10 초에 성공적으로 도달했습니다");

반품;

}

sn.innerhtml = parseint (sn.innerhtml, 10) +1;

}

</스크립트>

</head>

<body>

<div>

Delayer 사용 : </div>

<div>

<입력 유형 = "text"id = "txtycseconds"value = "3" />

<입력 유형 = "button"id = "btnbyc"onclick = "javaScript : beginyc ()"value = "시작 지연" />

<입력 유형 = "button"id = "btnoyc"onclick = "javaScript : overyc ()"value = "termid delay" />

<입력 유형 = "버튼"id = "button1"onclick = "javaScript : alert ( 'good monrning');

</div>

<br />

<div>

타이머 사용 : </div>

<div>

<입력 유형 = "text"id = "txtiintervalseconds"value = "1" /> />

<입력 유형 = "button"id = "btnbds"onclick = "javaScript : beggs ()"value = "시작 시간" />

<입력 유형 = "button"id = "btnods"onclick = "javaScript : Outds ()"value = "터미널 시간" /> />

<입력 유형 = "button"id = "btngds"onclick = "javaScript : goonds ()"value = "계속 타이밍" />

<입력 유형 = "text"id = "txtddsSeconds"value = "5" />

<입력 유형 = "버튼"id = "btndds"onclick = "javaScript : delayds ()"value = "지연 타이밍" />

</div>

</form>

</body>

</html>