JavaScript에서 setTimeout()을 사용하여 타이머를 설정하는 방법
- 青灯夜游원래의
- 2018-12-10 14:33:088033검색
JavaScript에서는 호출할 함수 또는 실행할 코드 문자열 매개변수와 지연 시간 매개변수를 setTimeout() 메서드에 설정하여 setTimeout() 메서드를 호출하여 간단한 타이머를 설정할 수 있습니다.
JS에서는 설정된 시간 간격 후에 특정 코드를 실행하기 위해 일부 기본 메서드가 제공됩니다. setTimeout() 메서드는 지정된 지연 시간 후에만 트리거되는 일회성 타이머를 설정합니다. setTimeout() 메서드가 타이머를 설정하는 방법을 살펴보겠습니다.
setTimeout() 메소드
setTimeout(): 일회성 타이머를 설정하고 지정된 밀리초 후에 함수를 호출하거나 표현식을 계산합니다. 로드하는 동안 지정된 시간을 지연한 후 표현식을 한 번 실행합니다. , 한 번만 실행됩니다. [추천 관련 비디오 튜토리얼: JavaScript 튜토리얼]
구문:
setInterval(code,millisec,lang);
매개변수 설명:
code: 필수 매개변수, 호출해야 하는 함수 또는 실행해야 하는 코드 문자열을 나타냅니다.
millisec: 주기적 실행 또는 "코드 매개변수" 호출 전의 시간 간격을 나타내는 필수 매개변수로 밀리초(1s=1000ms) 단위로 측정됩니다.
lang 선택적 매개변수입니다.
setTimeout() 메소드 예:
html 코드:
<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p> <button onclick="myFunction()">点我</button>
js 코드:
function myFunction()
{
setTimeout(function(){alert("Hello")},3000);
}Rendering:
setTimeout()은 무한 루프 타이머를 설정합니다
setTimeout( ) 메소드는 무한 루프 타이머를 구현할 수도 있습니다. 이때, setTimeout() 메서드는 무한 반복됩니다. 타이머를 중지하려면 clearTimeout() 메서드를 사용해야 합니다.
clearTimeout() 메소드
clearTimeout(): setTimeout()으로 설정된 타이머를 취소하는 데 사용되며, 무한 루프에 대해 setTimeout()을 설정할 때 사용됩니다.
구문:
clearTimeout(id_of_setTimeout);
매개변수 설명:
id_of_setTimeout: setTimeout()에서 반환된 ID 값을 나타냅니다.
참고: 이 값은 취소할 지연된 호출 함수 또는 지연된 실행 코드 문자열을 식별합니다.
setTimeout() 메서드와clearTimeout() 메서드를 결합한 예
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0,i;
function timedCount(){
document.getElementById('txt').value=num;
num=num+1;
i=setTimeout(timedCount,1000);
}
setTimeout(timedCount,1000);
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt">
<input type="button" value="Stop" onClick="stopCount()">
</form>
</body>
</html>렌더링:
예 가능합니다. setTimeout()에 의해 설정된 타이머는 처음에 무한 반복되어 입력 상자의 숫자가 계속 증가하는 것을 볼 수 있습니다. 중지 버튼을 누르면 setTimeout()을 중지하기 위해 ClearTimeout() 메서드가 호출됩니다. 타이머의 숫자는 더 이상 증가하지 않고 11로 유지됩니다.
요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
위 내용은 JavaScript에서 setTimeout()을 사용하여 타이머를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!