JavaScript에서 `setTimeout` 또는 `setInterval` 루프를 중지하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Mary-Kate Olsen

풀어 주다： 2024-12-13 16:59:10

원래의

796명이 탐색했습니다.

How to Stop a `setTimeout` or `setInterval` Loop in JavaScript?

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;
        }
    }
}

로그인 후 복사

이 수정된 코드는 setBgPosition 내에서 중지 기능을 정의합니다. 중지 기능은 타이머 핸들이 있는지 확인하고, 그렇다면 ClearTimeout을 사용하여 이를 지웁니다. 업데이트된 코드는 다음과 같이 사용할 수 있습니다.

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

로그인 후 복사

또는 setTimeout 대신 setInterval을 사용하여 반복 루프를 생성할 수 있습니다. 그러나 setInterval에서는 루프를 중지하려면clearInterval이 필요합니다.

function setBgPosition() {
    var c = 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;
        }
    }

    return setInterval(run, 200);
}

로그인 후 복사

이 코드는 다음과 같이 사용할 수 있습니다.

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

로그인 후 복사

마지막으로 setBgPosition 자체 내에서 조건을 사용하여 감지하는 것을 고려하는 것이 좋습니다. 로딩 프로세스가 완료되고 루프가 자동으로 중지됩니다.

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