자바스크립트 타이밍 이벤트

JavaScript Timing Events

JavaScript를 사용하면 함수가 호출된 직후가 아니라 설정된 시간 간격 후에 코드를 실행할 수 있습니다. 우리는 이것을 타이밍 이벤트라고 부릅니다.

JavaScript에서 타이밍 이벤트를 사용하는 것은 쉽습니다. 두 가지 주요 메서드는 다음과 같습니다.

setInterval() - 지정된 밀리초 수에 따라 지정된 코드를 지속적으로 실행합니다.

setTimeout() - 지정된 밀리초 동안 일시 중지한 후 지정된 코드를 실행합니다.

참고: setInterval() 및 setTimeout()은 HTML DOM Window 개체의 두 가지 메서드입니다.

setInterval() 메소드

setInterval()은 지정된 밀리초 동안 지정된 코드를 연속적으로 실행합니다.

Syntax

window.setInterval("javascript function",milliseconds);

window.setInterval() 메소드를 사용할 수 있습니다. 없이 창 접두사를 사용하고 setInterval() 함수를 직접 사용하세요.

setInterval() 첫 번째 매개변수는 함수입니다.

두 번째 매개변수 사이의 밀리초 수

참고: 1000밀리초는 1초입니다.

3초마다 "hello" 팝업이 뜹니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setInterval(function(){alert("Hello")},3000);
}
</script>
</body>
</html>

실행을 중지하는 방법은 무엇인가요?

clearInterval() 메소드는 setInterval() 메소드 실행의 함수 코드를 중지하는 데 사용됩니다.

Syntax

window.clearInterval(intervalVariable)

window.clearInterval() 메서드는 창 접두어를 사용하지 않고 직접적으로clearInterval() 함수를 사용할 수 있습니다.

clearInterval() 메서드를 사용하려면 타이밍 메서드를 생성할 때 전역 변수를 사용해야 합니다.

myVar=setInterval("javascript function",milliseconds);

그런 다음 ClearInterval() 메서드를 사용하여 실행을 중지할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
var t = self.setInterval("clock()",50)
function clock()
{
var time=new Date()
document.getElementById("clock_show").innerHTML=time
}
</script>
</head>
<body>
  <p id="clock_show"></p>
  <button onclick="window.clearInterval(t)">停止计时</button>
</body>
</html>

setTimeout() 메소드

Syntax

window.setTimeout("javascript function", milliseconds);

setTimeout() 메소드는 특정 값을 반환합니다. 위의 명령문에서 값은 t라는 변수에 저장됩니다. 이 setTimeout()을 취소하려면 이 변수 이름을 사용하여 지정할 수 있습니다.

setTimeout()의 첫 번째 매개변수는 JavaScript 문을 포함하는 문자열입니다. 이 문은 "alert('5 second!')"와 같을 수도 있고, AlertMsg()"와 같은 함수에 대한 호출일 수도 있습니다.

두 번째 매개변수는 첫 번째 매개변수가 실행될 현재 시간으로부터 몇 밀리초가 경과했는지 나타냅니다.

팁: 1000밀리초는 1초와 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>

실행을 중지하는 방법?

clearTimeout() 메서드는 setTimeout() 메서드의 함수 코드를 중지하는 데 사용됩니다. )

window.clearTimeout() 메서드 창 접두어를 사용할 수 없습니다.

clearTimeout() 메서드를 사용하려면 생성 시간 초과 메서드(setTimeout)에서 전역 변수를 사용해야 합니다.

myVar=setTimeout("javascript function",milliseconds);

함수가 아직 실행되지 않은 경우에는clearTimeout() 메서드를 사용하여 함수 코드 실행을 중지할 수 있습니다

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
    var s = 0;
    var n = 0;
    var t;
    function timeCount()
    {
    document.getElementById('second_show').value = s;
    n = n+1;
    s = n/10;
    t = setTimeout("timeCount()",100);
    }
</script>
</head>
<body>
  <form>
    <input type="button" value="开始计时" onClick="timeCount()">
    <input type="text" id="second_show">
    <input type="button" value="结束计时" onClick="clearTimeout(t)">
  </form>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> var s = 0; var n = 0; var t; function timeCount() { document.getElementById('second_show').value = s; n = n+1; s = n/10; t = setTimeout("timeCount()",100); } </script> </head> <body> <form> <input type="button" value="开始计时" onClick="timeCount()"> <input type="text" id="second_show"> <input type="button" value="结束计时" onClick="clearTimeout(t)"> </form> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear