Javascript 타이머에는 다음과 같은 2가지 함수가 있습니다. 1. 지정된 시간(밀리초 단위) 후에 특정 코드를 실행하는 데 사용되는 setTimeout() 함수 2. setInterval() 함수, 다음과 같이 사용됩니다. 특정 코드를 지정된 주기(단위: 밀리초)에 따라 반복적으로 실행합니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
JavaScript 타이머("타이머"라고도 함)는 지정된 시간이 지나면 특정 작업을 수행하는 데 사용됩니다. 이는 우리 삶의 알람 시계와 유사합니다.
JavaScript에서는 타이머를 사용하여 특정 코드의 실행을 지연시키거나 특정 코드를 고정된 간격으로 반복적으로 실행할 수 있습니다. 예를 들어, 타이머를 사용하여 페이지의 광고를 정기적으로 업데이트하거나 실시간 시계 등을 표시할 수 있습니다.
JavaScript는 타이머를 설정하는 두 가지 방법, 즉 setTimeout()과 setInterval()을 제공합니다. 두 방법의 차이점은 다음과 같습니다. 단위는 밀리초), 특정 코드는 한 번만 실행됩니다.
setInterval() | 특정 기간(단위는 밀리초)에 따라 특정 코드를 반복적으로 실행합니다. () 함수를 호출하여 브라우저 창을 수동으로 중지하거나 닫습니다 |
| setTimeout() |
JS setTimeout() 함수는 지정된 시간 이후 특정 코드를 실행하는 데 사용되며 해당 코드는 한 번만 실행됩니다.
| JS setTimeout() 함수의 구문 형식은 다음과 같습니다. | setTimeout(code,millisec)
로그인 후 복사
매개 변수 설명은 다음과 같습니다. |
code 필수입니다. 호출할 함수 다음에 실행될 JavaScript 코드 문자열입니다.
밀리초가 필요합니다. 코드를 실행하기 전에 기다려야 하는 시간(밀리초)입니다.
샘플 코드는 다음과 같습니다.
<!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()
- JS setInterval() 함수는 반복적으로 실행될 수 있는 타이밍 서버는 각 실행마다 지정된 시간 간격 동안 기다려야 합니다. JS 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>로그인 후 복사
실행 결과는 다음과 같습니다.
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
