[JavaScript] 타이머 함수 , 콜백(Callback)

타이머 함수

• setTimeout(함수, 시간) : 일정 시간 후 함수 실행
• setInterval(함수, 시간) : 시간 간격마다 함수 실행
• clearTimeout() : 설정된 Timeout 함수를 종료
• clearInterval() : 설정된 Interval 함수를 종료

 

위에서 작성되는 시간의 단위는 ms

1000ms = 1s = 1초 이다.

 

ex)

// 3초가 되면 console창에 hi가 뜬다
const timer = setTimeout(()=>{
	console.log('hi')
},3000)

const h1El = document.querySelector('h1')


// 3초가 지나기 전에 h1 태그를 클릭하면 timer함수는 실행되지 않는다
h1El.addEventListener('click', ()=>{
	clearTimeout(timer)
  })

 

---

콜백 (Callback)

-함수의 인수로 사용되는 함수

- 실행위치를 보장해줄 수 있다.

 

function timeout() {
	setTimeout(() =>{
    	console.log('hello')
    }, 3000)
  }
  
  timeout()
  console.log('Done!')

위처럼 작성하게 되면 위에서부터 차례로 진행이 되면서 timeout 함수가 먼저 읽히고 

console.log('Done!') 이 수행되지만 timeout함수의 수행물은 3초뒤에 띄워지기 때문에 

console창에는 'Done!'  이 먼저 출력되게 된다.

 

 

 

 

하지만 내가 원하는건 위의 timeout함수가 먼저 실행이 되고 'Done!' 이 작성되는것이라면

function timeout(callback) {
	setTimeout(() =>{
    	console.log('hello')
        callback()
    }, 3000)
  }
  
  timeout(() => {
    console.log('Done!')
  })

timeout() 함수에 인수로 함수를 넣어주고(콜백함수) 

원하는 위치에 매개변수로 함수를 호출하여 실행한다.

 

그렇게 되면 원하는 위치에서 실행이 될 것 이다.