JS : 타이머함수 setInterval, setTimeout, clearInterval, clearTimeout

일정시간 간격으로 반복되는 타이머 함수 setInterval 

 

타이머함수 선언법1.  setInterval(호출함수, 지연시간)

1초 간격으로 '안녕하세요' 문자열을 출력하는 타이머 함수

setInterval(function(){
  console.log('안녕하세요')
},1000)

 

타이머함수 선언법2.  var 변수명 = setInterval(호출함수, 지연시간)

0.5초 간격으로 0부터 시작한 숫자를 1씩 증가하는 타이머 함수

var count = 0
var timer = setInterval(function(){
  count++
  console.log(count)
},500)

 

---

 

 

일정시간 후 한번 실행되는 타이머 함수 setTimeout

 

 

타이머함수 선언법1.  setTimeout(호출함수, 지연시간)

2초 후 '안녕하세요' 문자열을 한번 출력하고 종료하는 타이머 함수

setTimeout(function(){
  console.log('안녕하세요')
},2000)

 

타이머함수 선언법2.  var 변수명 = setTimeout(호출함수, 지연시간)

1초 후 숫자 1을 증가하고 종료하는 타이머 함수

var count = 0
var timer = setTimeout(function(){
  count++
  console.log(count)
},1000)

 

 

---

 

setInterval타이머함수를 정지하는 clearInterval

 

타이머함수 정지 선언법.  clearInterval

1초 간격으로 반복되는 setInterval을 5초 후 정지하는 clearInterval

* setInterval을 정지하기 위해 별도의 변수에 타이머함수를 저장해야합니다.(아래 예시 기준 timer 변수)

* 타이머함수를 저장한 변수를 이용하여 clearInterval내에 정지 대상으로 활용합니다.

var count = 0
var timer = setInterval(function(){
    count++
    console.log(count)
}, 1000)

setTimeout(function(){
    clearInterval(timer)
}, 5000)

 

---

 

 

setTimeout 타이머함수를 정지하는 clearTimeout

 

타이머함수 정지 선언법.  clearTimeout

2초 후 인사말 팝업창을 띄우는 setTimeout을 미리 정지하는 clearTimeout

* setTimeout을 정지하기 위해 별도의 변수에 타이머함수를 저장해야합니다.(아래 예시 기준 timer 변수)

* 타이머함수를 저장한 변수를 이용하여 clearTimeout내에 정지 대상으로 활용합니다.

* 위 예시 clearInterval과 다른 점은 setTimeout없이 clearTimeout을 독립선언했기 때문에

곧바로 clearTimeout이 실행되어 적용됩니다.

var timer = setTimeout(function(){
    alert('안녕하세요')
},2000)

clearTimeout(timer)