setTimeout 메소드를 사용하는 방법-JS 튜토리얼-php.cn

setTimeout 메소드를 사용하는 방법

不言

풀어 주다： 2019-01-30 16:26:21

원래의

22864명이 탐색했습니다.

setTimeout() 메서드는 밀리초 단위로 지정된 시간 후에 함수를 호출합니다. setTimeout 메서드에는 콜백 함수에 대한 참조와 밀리초 단위의 지연이라는 두 가지 매개변수가 필요합니다. 메소드의 구체적인 사용법.

setTimeout 메소드를 사용하는 방법

먼저 setTimeout의 기본 구문을 살펴보겠습니다.

setTimeout(function, milliseconds, param_one, param_two, ...)

로그인 후 복사

setTimeout을 중지하고 함수 실행을 방지하려면 ClearTimeout() 메소드를 사용해야 합니다.

setTimeout() 메서드는clearTimeout() 메서드에서 사용할 수 있는 ID를 반환합니다.

간단한 예를 들어보겠습니다

코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<body>

<script>
  var sampleVar;
  function sampleFunction(){    
    sampleVar = setTimeout(alertFunc, 2000);
  }
  function alertFunc(){    
    alert("Two seconds have passed!");
  }
  sampleFunction();
</script>

</body>
</html>

로그인 후 복사

위 코드는 2시 이후에 팝업창이 열립니다 초.

예 2

이 예는 요소의 텍스트를 2초마다(3회) 변경합니다. 이렇게 하려면 일부 HTML 요소의 ID를 "counter"로 설정해야 합니다.

코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<body>

<p>单击下面的按钮。输入字段将显示经过2、4和6秒。</p>

<button onclick="timedText()">Display timed text</button>

<input type="text" id="text">

<script>
function timedText() {
    var x = document.getElementById("text");
    setTimeout(function(){ x.value="2 seconds" }, 2000);
    setTimeout(function(){ x.value="4 seconds" }, 4000);
    setTimeout(function(){ x.value="6 seconds" }, 6000);
}
</script>

</body>
</html>

로그인 후 복사

브라우저에서 표시되는 효과는 다음과 같습니다

setTimeout 메소드를 사용하는 방법

#🎜🎜 #왼쪽 버튼을 클릭하면 2초, 4초, 6초가 지났다는 내용이 텍스트 상자에 표시됩니다.

타이머가 끝나기 전에 "samplesstopfunction"이 호출되면 이렇게 됩니다. 예제에서는 "시간 초과"가 중지됩니다.

코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<body>

<p>等待3秒钟后，单击第一个按钮显示“Hi”。</p>
<p>单击第二个按钮以阻止执行第一个函数<br>（必须在3秒钟前单击它）</p>

<button onclick="sampleFunction()">Try it</button>
<button onclick="sampleStopFunction()">Stop the alert</button>

<script>
var sampleVar;

function sampleFunction() {
 sampleVar = setTimeout(function(){ alert("Hi") }, 2000);
}

function sampleStopFunction() {
 clearTimeout(sampleVar);
}
</script>

</body>
</html>

로그인 후 복사

브라우저에서 표시되는 효과는 다음과 같습니다

setTimeout 메소드를 사용하는 방법 #🎜🎜 #이 기사는 여기서 끝납니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 관련 칼럼 튜토리얼을 참고하세요! ! !