setInterval을 사용할 때 주의해야 하는 이유는 무엇입니까?

여기 계시다면 2개의 아름다운 웹 APIsetInterval 및 setTimeout를 발견하셨을 것이며 이들과 작동 방식을 더 깊이 이해하고 싶으실 것입니다.

포스팅 주제로 넘어가자면...
setInterval 및 setTimeout 의 기본 기능을 이해하고 있다고 가정합니다.

이제 왜 setInterval가 이 장난꾸러기인지 이해하기 전에 먼저 Javascript가 단일 스레드 언어라는 점을 상기해야 합니다. 즉, 한 번에 하나 이상의 작업만 수행할 수 있습니다.
setInterval의 문제를 설명하기 위해 예를 들어 보겠습니다.

function serverCall() {
    setTimeout(function() {
        console.log('x', new Date().toLocaleTimeString())
    }, 3000)
}

function callServerCall() {
    setInterval(function run() {
        console.log('y', new Date().toLocaleTimeString())
        serverCall()
    }, 1000)
}

callServerCall()


// Output will be
// y 02:00:54
// y 02:00:55
// y 02:00:56
// y 02:00:57
// x 02:00:57
// y 02:00:58
// x 02:00:58
// y 02:00:59
// x 02:00:59
// y 02:01:00
// x 02:01:00
// y 02:01:01
// ..
// ...

이전에 호출한 setInterval 함수가 실행되었는지 여부에 관계없이 1초마다 serverCall가 계속 실행되고 있음을 분명히 알 수 있습니다.

대기중인 서버에 대한 많은 요청이 있기 때문에 이것은 우리에게 엄청난 오버헤드가 될 것입니다.

주의사항

내부에서 비동기 작업setInterval을 호출하면 비용이 많이 듭니다.

비동기 작업이 delay 로 설정된 setInterval 보다 시간이 적게 걸리더라도 두 비동기 호출 사이의 간격은 정확히 delay 집합이 아닙니다. 비동기 작업을 실행하는 데 걸리는 시간도 지연에서 계산되기 때문에 훨씬 적습니다.

기사가 도움이 되었으면 합니다.

Github 및 (으)로 연락해 주세요.

날 따라와

좋은 하루 되세요 :)