JavaScript에서 `setTimeout` 루프를 중지하는 방법은 무엇입니까?

setTimeout 루프의 실행을 제어하는 ​​방법

스프라이트 이미지를 사용하여 로딩 표시기를 생성하려고 시도하다가 다음과 같은 문제가 발생했습니다. 로드가 완료되면 루프를 중지하는 문제입니다. 제공한 함수는 지정된 간격으로 값 배열을 반복하는 setTimeout 루프를 시작합니다. 문제는 프로그래밍 방식으로 이 루프를 중지하는 것입니다.

이 문제를 해결하려면 setTimeout에서 반환된 타이머 핸들을 활용할 수 있습니다. 이후에clearTimeout을 사용하여 시간 초과 작업을 중지할 수 있습니다.

다음은 이 기술을 통합하는 수정된 코드 버전입니다.

function setBgPosition() {
    var c = 0,
        timer = 0;
    var numbers = [0, -120, -240, -360, -480, -600, -720];
    function run() {
        Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
        if (c >= numbers.length) {
            c = 0;
        }
        timer = setTimeout(run, 200);
    }
    timer = setTimeout(run, 200);

    return stop;

    function stop() {
        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }
    }
}

var stop = setBgPosition();
// ...later, when you're ready to stop...
stop();

타이머 변수에 타이머 핸들을 할당하면 다음과 같은 작업을 수행할 수 있습니다. 로드가 완료되면 clearTimeout을 사용하여 참조하고 삭제합니다.

또한 대신 setInterval을 사용하는 것도 고려해 볼 가치가 있습니다. 반복 실행이 필요한 시나리오에서는 setTimeout입니다. 이를 통해 코드를 단순화하고 보다 강력한 솔루션을 제공할 수 있습니다.

자립적이고 자율적인 기능을 보장하기 위해 루프가 종료되어야 하는 시점을 감지하려면 setBgPosition 자체 내에서 적절한 메커니즘을 구현해야 합니다.

위 내용은 JavaScript에서 `setTimeout` 루프를 중지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!