clearTimeout 왜 안 됨?

요약: setTimeout/setInterval 을 포함하는 함수에서 setTimeout/setInterval의 ID를 return하지 말고 id 변수에 직접 할당할 것.

 

let updateCameraListTimeoutId;
updateCameraListTimeoutId = updateCameraListPeriodically();

// ...

function updateCameraListPeriodically() {
    if (updateCameraListTimeoutId !== undefined) {
        console.log(`run        updateCameraListTimeoutId: ${updateCameraListTimeoutId}`);
    }
    updateCameraList();
    if (isConnected) {
        initCameraContainer();
    }
    const id = setTimeout(updateCameraListPeriodically, 5000);
    console.log(`setTimeout updateCameraListTimeoutId: ${id}`);
    return id;
}

// ...

const onClickDetailModalBtn = function (event) {
    clearTimeout(updateCameraListTimeoutId);

    // ...
}

위 코드는 잘 돌아갈까? 결론적으로 잘못됐다. 초기에 리턴된 값으로 timeout id가 고정되고 새로운 timeout id 값으로 수정된 적이 없어서 재귀적으로 호출되는 함수의 'run updateCameraListTimeoutId' 부분의 출력 결과가 계속 동일하다. 따라서 clearTimeout이 제대로 적용되지 않는다. 따라서 아래와 같이 수정한다.

 

let updateCameraListTimeoutId;
updateCameraListPeriodically();

// ...

function updateCameraListPeriodically() {
    if (updateCameraListTimeoutId !== undefined) {
        console.log(`run        updateCameraListTimeoutId: ${updateCameraListTimeoutId}`);
    }
    updateCameraList();
    if (isConnected) {
        initCameraContainer();
    }
    updateCameraListTimeoutId = setTimeout(updateCameraListPeriodically, 5000);
    console.log(`setTimeout updateCameraListTimeoutId: ${updateCameraListTimeoutId}`);
}

// ...

const onClickDetailModalBtn = function (event) {
    clearTimeout(updateCameraListTimeoutId);

    // ...
}

위와 같이 setTimeout을 호출할 때마다 직접 timeout id로 사용할 변수에 할당해주면 clearTimeout이 잘 적용된다.