자바스크립트 타이밍 이벤트
JavaScript를 사용하면 함수 호출 직후가 아닌 설정된 시간 간격 후에 코드를 실행할 수 있습니다. 우리는 이것을 타이밍 이벤트라고 부릅니다.
JavaScript에서 타이밍 이벤트를 사용하는 것은 매우 쉽습니다. 두 가지 주요 메서드는 다음과 같습니다.
setInterval() - 지정된 밀리초 동안 지정된 코드를 지속적으로 실행합니다.
setTimeout() - 지정된 밀리초 동안 일시 중지한 후 지정된 코드를 실행합니다.
참고: setInterval() 및 setTimeout()은 HTML DOM Window 개체의 두 가지 메서드입니다.
setInterval() 메소드
setInterval()은 지정된 밀리초 간격으로 지정된 코드를 지속적으로 실행합니다.
Syntax
window.setInterval() 메소드는 창 접두사를 사용하지 않고 setInterval() 함수를 직접 사용할 수 있습니다.
setInterval() 첫 번째 매개변수는 함수입니다.
두 번째 매개변수 사이의 밀리초 수
참고: 1000밀리초는 1초입니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>单击按钮每3秒出现一个“Hello”警告框。</p>
<p>再次点击警告框，经过3秒出现新的警告框，这将一直执行 ...</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setInterval(function(){alert("Hello")},3000);
}
</script>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
인스턴스는 setInterval() 메서드를 사용하는 방법을 보여주지만 3초마다 팝업되는 것은 그렇지 않습니다. 사용자 경험에 좋습니다.
다음 예에서는 현재 시간을 표시합니다. setInterval() 메소드는 시계처럼 매초 실행되도록 코드를 설정합니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>在页面显示一个时钟</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
실행을 중지하는 방법은
clearInterval() 메서드입니다. setInterval() 메소드 실행.
문법
window.clearInterval() 메서드는 창 접두어와 clearInterval() 함수 없이 직접 사용할 수 있습니다.
clearInterval() 메서드를 사용하려면 타이밍 메서드를 생성할 때 전역 변수를 사용해야 합니다.
그런 다음 ClearInterval() 메서드를 사용하여 실행을 중지할 수 있습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>页面上显示时钟：</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止时钟</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
clearInterval(myVar);
}
</script>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
setTimeout() 메서드
Syntax
setTimeout() 메서드는 특정 값을 반환합니다. 위의 명령문에서 값은 t라는 변수에 저장됩니다. 이 setTimeout()을 취소하려면 이 변수 이름을 사용하여 지정할 수 있습니다.
setTimeout()의 첫 번째 매개변수는 JavaScript 문을 포함하는 문자열입니다. 이는 "alert('5 second!')"와 같은 문일 수도 있고, AlertMsg()"와 같은 함수에 대한 호출일 수도 있습니다.
두 번째 매개 변수는 첫 번째 매개 변수가 실행될 현재 시간으로부터 몇 밀리초가 경과했는지 나타냅니다.
팁: 1000밀리초는 1초와 같습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
실행을 중지하는 방법은 무엇입니까?
clearTimeout () 메소드는 setTimeout( ) 메소드의 실행을 중지하는 데 사용됩니다.
Syntax
window.clearTimeout() 이 메소드는 창 접두어를 사용할 수 없습니다. ClearTimeout() 메서드를 사용하려면 시간 초과 메서드(setTimeout)에서 전역 변수 사용을 생성해야 합니다.
myVar=setTimeout("<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
<p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p>
<button onclick="myFunction()">点我</button>
<button onclick="myStopFunction()">停止弹框</button>
<script>
var myVar;
function myFunction(){
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
clearTimeout(myVar);
}
</script>
</body>
</html>
예제 실행»온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
또 다른 간단한 타이밍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function timedText(){
var x=document.getElementById('txt');
var t1=setTimeout(function(){x.value="2 seconds"},2000);
var t2=setTimeout(function(){x.value="4 seconds"},4000);
var t3=setTimeout(function(){x.value="6 seconds"},6000);
}
</script>
</head>
<body>
<form>
<input type="button" value="显示文本时间!" onclick="timedText()" />
<input type="text" id="txt" />
</form>
<p>点击上面的按钮，输出的文本将告诉你2秒，4秒，6秒已经过去了。</p>
</body>
</html>
Run Instance»온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요
