웹 테스트 중 setinterval 을 사용할 기회가 있어서 공부해보았습니다.
함수를 호출하거나 일정 시간 간격으로 함수를 호출할 때 사용합니다.
웹 제작시 동적인 느낌을 주기에 좋은 메소드 입니다.
문법
setInterval(function, milliseconds, param1, param2, ...)setInterval(함수, 시간간격ms, 매개변수1, 매개변수2, ...) 구성입니다.
함수와 시간은 필수 요구사항이며, 매개변수는 선택사항입니다.
clearInterval 메소드를 사용하여 반복을 중지할 수 있습니다.
예제
html 코드 구성
<p>A script on this page starts this clock:</p>
<p id="demo"></p> <!-- 시간 표시되는 곳 -->
<button onclick="myStopFunction()">Stop time</button> <!-- 정지 버튼 클릭시 myStopFunction 함수 실행 -->
스크립트 구성
var myVar = setInterval(myTimer, 1000); /* myTimer 함수가 1초 단위로 실행 */
/* myTimer 함수 */
function myTimer() {
var d = new Date(); /* 날짜 추출 */
var t = d.toLocaleTimeString(); /* 오전 H:MM:SS 형태로 시간변환 */
document.getElementById("demo").innerHTML = t; /* html 코드의 #demo 에 변수 t 넣기 */
}
/* myTimer 함수 끝 */
/* myStopFunction 정지 함수 */
function myStopFunction() {
clearInterval(myVar); /* myVar 정지 */
}
/* myStopFunction 정지 함수 끝 */
결과 화면
시간이 1초 단위로 setInterval 적용되며 노출되다가 Stop time 클릭 시 정지하는 것을 알 수 있습니다.
[참고] https://www.w3schools.com/jsref/met_win_setinterval.asp