JavaScript 타이머 이벤트

JavaScript 타이머 이벤트
자바 스 크 립 트 를 사용 하면 함수 가 호출 된 후에 바로 실행 하 는 것 이 아니 라 설정 한 시간 간격 후에 코드 를 실행 할 수 있 습 니 다.우 리 는 그것 을 시간 계산 사건 이 라 고 부른다.
자바 Scritp 에서 시간 계산 이 벤트 를 사용 하 는 것 은 매우 쉽다.두 가지 관건 적 인 방법 은:

setTimeout()

미래의 모시 실행 코드

clearTimeout()

setTimeout 취소()
setTimeout()
문법

var t=setTimeout("javascript  ",  )

setTimeout()         。       ，        t     。          setTimeout()，              。

setTimeout()의 첫 번 째 매개 변 수 는 JavaScript 문 구 를 포함 한 문자열 입 니 다.이 문 구 는"alert('5 seconds!')"와 같 을 수 있 습 니 다.또는 함수 호출,예 를 들 어 alertMsg()".
두 번 째 매개 변 수 는 현재 부터 몇 밀리초 후에 첫 번 째 매개 변 수 를 실행 하 는 지 표시 합 니 다.
알림:1000 밀리초 는 1 초 입 니 다.
실례
다음 예 에서 단 추 를 누 르 면 알림 상자 가 5 초 후에 팝 업 됩 니 다.

<html>
<head>
<script type="text/javascript">
function timedMsg()
 {
 var t=setTimeout("alert('5 seconds!')",5000)
 }
</script>
</head>

<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>

인 스 턴 스-무한 순환
무한 순환 에서 실행 되 는 타 이 머 를 만 들 려 면 함 수 를 만들어 서 자신 을 호출 해 야 합 니 다.아래 의 예 에서 단 추 를 누 르 면 입력 필드 는 0 부터 계산 합 니 다.

<html>

<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
 {
 document.getElementById('txt').value=c
 c=c+1
 t=setTimeout("timedCount()",1000)
 }
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>

</html>

clearTimeout()
문법

clearTimeout(setTimeout_variable)

아래 의 예 는 위의 무한 순환 의 예 와 비슷 하 다.유일한 차이 점 은 지금 우리 가'Stop Count!'를 추가 했다 는 것 이다.이 계산 기 를 멈 추 려 면 단 추 를 누 르 십시오:

<html>

<head>
<script type="text/javascript">
var c=0
var t

function timedCount()
 {
 document.getElementById('txt').value=c
 c=c+1
 t=setTimeout("timedCount()",1000)
 }

function stopCount()
 {
 clearTimeout(t)
 }
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>

</html>

다른 두 가지 중요 한 방법:
setInterval()

setInterval() - executes a function, over and over again, at specified time intervals

역할 은 한 가지 방법 을 순환 적 으로 집행 하고 규정된 간격 내 에
문법:

window.setInterval("javascript function",milliseconds);

설명:첫 번 째 매개 변 수 는 하나의 함수 여야 합 니 다.두 번 째 매개 변 수 는 실행 함수 의 간격 입 니 다.
실례:

<html>
<script type="text/javascript">
setInterval(function() {alert("hello")},500);
</script>
</html>

설명:위의 예 에서 실행 효 과 는 500 ms 마다 alert("hello")를 말 합 니 다.
시계 하나 더:

<html>
<body>
<p id="demo" ></p>
<script type="text/javascript">
setInterval(function(){ myTimer()},1000);
        function  myTimer(){
                var d = new Date();
                var t=d.toLocaleTimeString();
                document.getElementById('demo').innerHTML=t;
        }
</script>
</body>
</html>

어떻게 멈 춰,setInterval()방법?
window.clearInterval()
문법:

window.clearInterval(intervalVariable)

The window.clearInterval() method can be written without the window prefix.
To be able to use the clearInterval() method, you must use a global variable when creating the interval method:
myVar=setInterval("javascript function",milliseconds);
Then you will be able to stop the execution by calling the clearInterval() method.
실례:

<html>
<body>
<p id="demo" ></p>
<p id="demo2" onclick="stop()">stop</p>
<script type="text/javascript">
var temp=setInterval(function(){ myTimer()},1000);
        function  myTimer(){
                var d = new Date();
                var t=d.toLocaleTimeString();
                document.getElementById('demo').innerHTML=t;
        }
function stop(){
   <html>
<body>
<p id="demo" ></p>
<p id="demo2" onclick="stop()">stop</p>
<script type="text/javascript">
var temp=setInterval(function(){ myTimer()},1000);
        function  myTimer(){
                var d = new Date();
                var t=d.toLocaleTimeString();
                document.getElementById('demo').innerHTML=t;
        }
function stop(){
 clearInterval(temp); }
</script>
</body>
</html>

}
</script>
</body>
</html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

기초 정리 - 1

문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

JavaScript 타이머 이벤트

좋은 웹페이지 즐겨찾기