- setInterval 함수 : 일정한 시간 간격으로 작업을 수행하기 위해서 사용합니다.clearInterval 함수를 사용하여 중지할 수 있습니다. 주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생할 수 있습니다.
- setTimeout 함수 : 일정한 시간 후에 작업을 한번 실행합니다. 보통 재귀적 호출을 사용하여 작업을 반복합니다. 기본적으로 setInterval 과는 달리 지정된 시간을 기다린후 작업을 수행하고, 다시 일정한 시간을 기다린후 작업을 수행하는 방식입니다. 지정된 시간 사이에 작업 시간이 추가 되는 것입니다. clearTimeout() 을 사용해서 작업을 중지합니다.
- clearInterval(), clearTimeout()이 실행중인 작업을 중지시키는 것은 아닙니다. 지정된 작업은 모두 실행되고 다음 작업 스케쥴이 중지 되는 것입니다.
setInterval() 함수 사용법.
w3schools.com 사이트의 예제사용
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <body> <p>Click the button to wait 3 seconds, then alert "Hello".</p> <p>After clicking away the alert box, an new alert box will appear in 3 seconds. This goes on forever...</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { setInterval(function(){ alert("Hello"); }, 3000); } </script> </body> </html> | cs |
▶ 예제설명 : "Hello!" 라는 메시지를 3초 마다 알림창을 띄우는 예제입니다.
1. Tryit 버튼을 클릭시 myFunction() 함수가 호출됩니다.
2. myFunction() 메소드가 호출되고 setInterval({함수},{설정할시간}) 호출됩니다.
3. 시간을 3000으로 설정하였기때문에 3초마다 function(){ alert("Hello"); } 가 호출됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <body> <p>Click the button to wait 3 seconds, then alert "Hello".</p> <button onclick="myFunction()">Try it</button> <script> var myVar; function myFunction() { myVar = setTimeout(alertFunc, 3000); } function alertFunc() { alert("Hello!"); } </script> </body> </html> | cs |
'웹개발 > javascript' 카테고리의 다른 글
| [javascript] 1일차 - 자바스크립트 문법 (0) | 2018.03.20 |
|---|