[Javascript] 대기 시간이 0인 setTimeout은 무엇일까?

setTimeout 함수

• 일정 시간이 지난 후에 함수를 실행하거나 코드 블록을 실행할 때 사용한다.
  • 첫 번째 인자로는 실행하고자 하는 함수
  • 두 번째 인자로는 지연 시간(ms기준)을 전달한다

    function hello() {
    	console.log('Hello')
    }
    
    setTimeout(hello, 1000) // 1초 후에 hello가 호출
    // hello()를 넣으면 함수가 호출된 이후를 의미하기에 반환문도 없어 undefined가 나옴
    // 물론 위의 예시도 반환 값은 없긴 하지만 일종의 알아야 할 점이라고 생각하면 된다.
    // const result = setTimeout(hello(), 1000) // undefined
    
    ////////////////////////////////////////////////////////
    // 코드 블록 실행
    setTimeout(() => {
    	callback()
    }, 1000)

setTimeout(func, 0)

• setTimeout(func, 0)이나 setTimeout(func)을 사용하면 대기 시간이 0이다.
• 정확하게는 0의 의미로 활용한다기 보다는 현재 실행 중인 스크립트가 종료된 직후에 원하는 func이 실행될 수 있게 하는 것이다.
• 자바스크립트 엔진은 싱글 스레드 방식이기에 동기적으로 태스크 하나씩 처리한다.
• 다만 웹 브라우저는 Web API, 이벤트 루프, 콜백 큐 등을 가지고 있고, 이들은 비동기 메서드들이다. 즉, 여러 개의 스레드, 멀티 스레드로 Web API가 동작한다.

동작과정

• setTimeout은 task queue에 들어가서 이벤트 루프가 call stack이 비어있는지 확인하고, 비어있다면 task queue에서 빼내서 call stack으로 옮긴 후 실행시킨다.

• 예를 들어 보자
  

    const func1 = () =>  { console.log(123) }
    
    const blockFunc = () =>  {
    	console.log(1)
    	console.log(2)
    	func1()
    	console.log(3)
    }

• 내가 원했던 것은 출력이 1, 2, 3, 123을 원하지만 결과는 1, 2, 123, 3이다.
• 이 때 setTimeout을 적용해서 원하는 결과대로 만들어보자
  

    const func1 = () =>  { console.log(123) }
    
    const blockFunc = () =>  {
    	console.log(1)
    	console.log(2)
    	setTimeout(func1, 0)
    	console.log(3)
    }

• 그럼 결과로 1, 2, 3, 123이 나오게 된다.

• 예시가 좀 단순해서 당연하다고 볼 수도 있고, 현재 예시에서 0이 아닌 다른 시간을 놓아도 동작은한다.

• 말하고 싶은 부분은 저 blockFunc내에서 다른 함수를 호출한다고 했을 때 이전의 결과들이 값을 마무리 하기 전에 함수를 실행시키기 때문에

• 다른 작업과의 상호작용이 필요할 때, async, await 등이 적용이 안되는 상황 등

• 이러한 경우에 setTimeout(func, 0) 방법이 유용하다.

• setTimeout(func,0), setTimeout(() ⇒ {}, 0) 방법들 모두 비동기 작업을 적절히 제어하기 위해 사용하면된다.

• 다만, 너무 남발할 경우 CPU 성능이 안좋아질 수 있다.

  • 태스크 큐에 많이 쌓이게 되고
  • 컨텍스트 전환이 자주 발생되면 CPU에 부담을 준다