settimeout, setinterval 차이 및 예제

1. setTimeout

설명 : 기존 동작이 한번 일어난다.
사용방법
 var SETTIMEOUT_NAME = setTimeout(FUNCTION, TIME);

실행중인 루프 종료 방법
 clearTimeout(SETINTERVAL_NAME);

2. setInterval

설명 : 기본 동작이 반복적으로 일어난다.
사용방법
 var SETINTERVAL_NAME = setInterval(FUNCTION, TIME);

실행중인 루프 종료 방법
 clearInterval(SETINTERVAL_NAME);

[ 공통 ]
 - SETINTERVAL_NAME : 실행중인 루프(반복)를 종료시킬 때 사용함
 - FUNCTION : 루프로 실행할 함수
 - TIME : 루프되는 시간

둘다 사용법은 같으며 용도 또한 같다..단지 다른점은

- setInterval : 실행중 다른 setInterval로 인해 함수가 호출되면 기존에 실행되던 함수는 종료된다.
- setTimeout: 실행중 다른 setTimeout로 인해 함수가 호출되도 기존에 실행된 함수에 영향을 주지 않는다.

출처: https://honjoo.tistory.com/32 [내가 그린 그림은]
예제

1. setTimeout,setInterval - 역할

setTimeout - 일정 시간 후 한번 실행

setInterval - 일정 시간마다 반복 실행

clearTimeout - 일정 시간 후 한번 실행하는 것을 중지

clearInterval - 일정시간마다 반복하는 것을 중단

2. setTimeout - 예제

◈ 코드

 $(document).ready(function ()  
       
 { 
       
     setTimeout(function() 
       
  { 
       
        alert("2초후 한번 실행됩니다."); 
       
     },2000); 
       
 }); 
       

---

◈ 설명

2초를 기다리면 위와 같은 문구가 한번 실행되는 것을 확인할 수 있습니다

3. setInterval - 예제

◈ 코드

 $(document).ready(function ()  
       
 { 
       
     setInterval(function() 
       
  { 
       
        alert("2초마다 반복 실행됩니다."); 
       
     },2000); 
       
 }); 
       

---

◈ 설명

2초마다 위와 같은 문구가 반복 실행되는 것을 확인할 수 있습니다

4. clearTimeout - 예제

◈ 코드

 $(document).ready(function ()  
       
 { 
       
     var testInterval = setInterval(function() { 
       
         alert("2초마다 반복 실행됩니다."); 
       
         },2000); 
       
      
       
     setTimeout(function() { 
       
         clearTimeout(testInterval); 
       
     },7000); 
       
 }); 
       

---

◈ 설명

 "2초마다 반복 실행됩니다"라는 문구가 3번 출력됩니다

 6초까지 실행하다가 7초에 중단했기 때문에 3번만 나타나게 됩니다

출처: https://devjhs.tistory.com/115 [키보드와 하루]