>  기사  >  웹 프론트엔드  >  자바스크립트의 타이머란 무엇인가요?

자바스크립트의 타이머란 무엇인가요?

青灯夜游
青灯夜游원래의
2021-11-26 18:04:224424검색

JavaScript에는 두 가지 유형의 타이머가 있습니다. 1. 지정된 시간(밀리초 단위) 후에 코드 블록을 실행할 수 있는 setTimeout() 메서드를 사용하여 정의된 단일 타이머 2. setInterval() 메서드 정의를 사용하는 루프 타이머; 특정 주기(밀리초)에 따라 특정 코드를 반복적으로 실행합니다.

자바스크립트의 타이머란 무엇인가요?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript에서는 타이머를 사용하여 특정 코드의 실행을 지연시키거나 특정 코드를 고정된 간격으로 반복적으로 실행할 수 있습니다. 예를 들어, 타이머를 사용하여 페이지의 광고를 정기적으로 업데이트하거나 실시간 시계 등을 표시할 수 있습니다.

JavaScript는 두 가지 타이머를 제공합니다: setTimeout() 및 setInterval()

Method Description
setTimeout() 지정된 시간(단위: 밀리초) 후에 특정 코드를 실행하면 해당 코드만 실행됩니다. 한 번 실행
setInterval() 특정 기간(밀리초 단위)에 따라 특정 코드를 반복적으로 실행합니다. 브라우저를 수동으로 중지하거나 종료하기 위해 cleanInterval() 함수를 호출하지 않는 한 타이머는 자동으로 중지되지 않습니다. window

setTimeout()

JS setTimeout() 함수는 지정된 시간 이후에 특정 코드를 실행하는 데 사용됩니다.

사용 방법:

setTimeout(code,millisec)
  • 코드가 필요합니다. 호출할 함수 다음에 실행될 JavaScript 코드 문자열입니다.

  • 밀리초가 필요합니다. 코드를 실행하기 전에 기다려야 하는 시간(밀리초)입니다.

예:

<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<button id="button" onclick="click1()">获取验证码</button>
		<span id="span"></span>
		<script>
			var time = 10;
			var num;
			var button = document.getElementById("button");
			var span = document.getElementById("span");
 
			function click1() {
				//click是关键字,所有函数名改为click1
				if (time == 0) {
					button.disabled = false;
					time = 10;
					span.innerHTML = "";
					clearTimeout(num);
				} else {
					button.disabled=true;
					span.innerHTML = time + "秒后重新获得返回值";
					time--;
					num = setTimeout("click1()",1000);
				}
			}
		</script>
	</body>
</html>

setInterval()

JS setInterval() 함수는 반복적으로 실행될 수 있는 타이머를 정의할 수 있습니다. 각 실행은 지정된 시간 간격 동안 기다려야 합니다.

사용 방법:

setInterval(code,millisec[,"lang"])
  • 코드가 필요합니다. 호출할 함수 또는 실행할 코드 문자열입니다.

  • 밀리섹은 필수입니다. 주기적 실행 또는 코드 호출 사이의 시간 간격(밀리초)입니다.

예:

<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<button id="button" onclick="set()">获取验证码</button>
		<span id="span"></span>
		<script>
			var time = 10;
			var num;
			var button = document.getElementById("button");
			var span = document.getElementById("span");
 
			function set() {
				num = setInterval("click()", 1000);
				button.disabled = true;
			}
 
			function click() {
				if (time == 0) {
					button.disabled = false;
					time = 10;
					span.innerHTML = "";
					clearInterval(num);
				} else {
					span.innerHTML = time + "秒后重新获得返回值"
					time--;
				}
			}
		</script>
	</body>
</html>

[추천 학습: javascript 고급 튜토리얼]

위 내용은 자바스크립트의 타이머란 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.