자바스크립트 타이머에는 어떤 기능이 있나요?
- 青灯夜游원래의
- 2021-10-20 16:56:446582검색
Javascript 타이머에는 다음과 같은 2가지 함수가 있습니다. 1. 지정된 시간(밀리초 단위) 후에 특정 코드를 실행하는 데 사용되는 setTimeout() 함수 2. setInterval() 함수, 다음과 같이 사용됩니다. 특정 코드를 지정된 주기(단위: 밀리초)에 따라 반복적으로 실행합니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
JavaScript 타이머("타이머"라고도 함)는 지정된 시간이 지나면 특정 작업을 수행하는 데 사용됩니다. 이는 우리 삶의 알람 시계와 유사합니다.
JavaScript에서는 타이머를 사용하여 특정 코드의 실행을 지연시키거나 특정 코드를 고정된 간격으로 반복적으로 실행할 수 있습니다. 예를 들어, 타이머를 사용하여 페이지의 광고를 정기적으로 업데이트하거나 실시간 시계 등을 표시할 수 있습니다.
JavaScript는 타이머를 설정하는 두 가지 방법, 즉 setTimeout()과 setInterval()을 제공합니다. 두 방법의 차이점은 다음과 같습니다. 단위는 밀리초), 특정 코드는 한 번만 실행됩니다.
| 특정 기간(단위는 밀리초)에 따라 특정 코드를 반복적으로 실행합니다. () 함수를 호출하여 브라우저 창을 수동으로 중지하거나 닫습니다 | |
|---|---|
| setTimeout() | |
| JS setTimeout() 함수의 구문 형식은 다음과 같습니다. | 매개 변수 설명은 다음과 같습니다. |
밀리초가 필요합니다. 코드를 실행하기 전에 기다려야 하는 시간(밀리초)입니다. 샘플 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var myFun = function (str = 'JavaScript'){
document.write(str + "<br>");
};
setTimeout(myFun, 500, 'Hello');
setTimeout(myFun, 1000);
setTimeout(function(){
document.write("定时器<br>");
}, 1500)
setTimeout("document.write(\"setTimeout()\")", 2000);
</script>
</body>
</html>위 코드를 실행하면 다음 내용이 500밀리초 간격으로 출력됩니다. Hello JavaScript 定时器 setTimeout()
setInterval()
setInterval(code,millisec[,"lang"])매개 변수 설명은 다음과 같습니다. code 필수입니다. 호출할 함수 또는 실행할 코드 문자열입니다.
밀리섹은 필수입니다. 주기적 실행 또는 코드 호출 사이의 시간 간격(밀리초)입니다. 팁: setInterval() 함수에 의해 정의된 타이머는 브라우저 창을 수동으로 중지하거나 닫기 위해 clearInterval() 함수를 호출하지 않는 한 자동으로 중지되지 않습니다. 샘플 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<p id="one"></p>
<p id="two"></p>
<script type="text/javascript">
var num = 1;
var myFun = function (){
document.getElementById('one').innerHTML += num + " ";
num ++;
};
setInterval(myFun, 500);
setInterval(function(){
var d = new Date();
document.getElementById('two').innerHTML = d.toLocaleTimeString();
}, 1000);
</script>
</body>
</html>실행 결과는 다음과 같습니다.
- JS 타이머 취소
setTimeout() 또는 setInterval()을 사용하여 타이머를 설정하면 두 메서드 모두 생성됩니다. 타이머 고유 ID, ID는 "타이머 식별자"라고도 알려진 양의 정수 값입니다. 이 ID를 통해 ID에 해당하는 타이머를 지울 수 있습니다.
clearTimeout() 또는clearInterval() 함수를 사용하여 각각 setTimeout() 또는 setInterval() 함수로 생성된 타이머를 지울 수 있습니다. ClearTimeout() 또는clearInterval() 함수를 호출하려면 타이머의 고유 ID를 매개변수로 제공해야 합니다. 샘플 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<p>当前时间为：<span id="clock"></span></p>
<button onclick="stopClock(this);">停止</button><hr>
<button onclick="delayedAlert(this);">2秒后弹出一个提示框</button>
<button onclick="clearAlert();">取消</button>
<script type="text/javascript">
var intervalID;
function showTime() {
var d = new Date();
document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
function stopClock(e) {
clearInterval(intervalID);
e.setAttribute('disabled', true)
}
intervalID = setInterval(showTime, 1000);
var timeoutID;
var that;
function delayedAlert(e) {
that = e;
timeoutID = setTimeout(showAlert, 2000);
e.setAttribute('disabled', true)
}
function showAlert() {
alert('这是一个提示框。');
that.removeAttribute('disabled');
}
function clearAlert() {
clearTimeout(timeoutID);
that.removeAttribute('disabled');
}
</script>
</body>
</html>실행 결과는 다음과 같습니다.
[추천 학습: 자바스크립트 고급 튜토리얼
]
위 내용은 자바스크립트 타이머에는 어떤 기능이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!