js 타이머 활용(예제와 함께 설명)_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), Expression은 DelayTime마다 실행됩니다.
setInterval("function", time)은 시간 초과 개체를 설정하는 데 자주 사용됩니다.

SetInterval은 자동으로 반복되며, setTimeout은 반복되지 않습니다.

clearTimeout(object)는 setTimeout 객체를 지웁니다

clearInterval(object)는 setInterval 객체를 지웁니다

두 가지 예만 들어보세요.

예제 1. 폼이 트리거되거나 로드되면 문자열을 그대로 출력

코드 복사 코드는 다음과 같습니다.

< head>

예 2. 입력 상자에 포커스가 있을 때 입력 상자 정보를 정기적으로 확인하고, 포커스가 맞지 않을 때는 확인 작업을 수행하지 않습니다.

코드 복사 코드는 다음과 같습니다.

< title>제목 없는 문서

예제 3. 다음은 타이머가 만료된 후 경고 창이 팝업되는 가장 간단한 예입니다.

코드 복사 코드는 다음과 같습니다.

< ;script 언어="javascript">
function count() {
document.getElementByIdx_x_x('m').innerHTML="타이머가 시작되었습니다!";
setTimeout("alert(' 10초 후!')",10000)
}

< 입력 TYPE="button" value=" 타이밍 시작" onclick="count()">

예시 4: 카운트다운 시간 점프

코드 복사 코드는 다음과 같습니다.