setTimeout 루프를 중지하는 방법

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

---

이미지 스프라이트로 로딩 표시기를 만들려고하는데이 기능을 생각해 냈습니다.

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)
        {
            setTimeout(run, 200);
        }else
        {
            setBgPosition();
        }
    }
    setTimeout(run, 200);
}

그래서 출력은 다음과 같습니다

http://jsfiddle.net/TTkre/

나는 setBgPosition (); 이 루프에서 계속 실행되도록하기 위해 다른 내부에서 [로드 완료]를 원하면이 루프를 중지하는 방법이 문제입니까?

---

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();

setBgPosition다시 호출 하는 대신으로 다시 설정 c했습니다 0. 그렇지 않으면 작동하지 않습니다. 또한 0시간 초과가 보류 중이 아닐 때 핸들 값으로 사용 했습니다. 0유효한 반환 값이 setTimeout아니므로 편리한 플래그를 만듭니다.

이것은 또한 당신 setInterval이 setTimeout. 보다 더 나은 곳이라고 생각하는 (몇 안되는) 장소 중 하나입니다 . setInterval반복합니다. 그래서:

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 중지 하는 방법을 찾고 싶습니다 .

---

나는 이것이 오래된 질문이라는 것을 알고 있습니다. 어쨌든 내 접근 방식을 게시하고 싶습니다. 이렇게하면 TJ Crowder가 설명한 0 트릭을 처리 할 필요가 없습니다.

var keepGoing = true;

function myLoop() {
    // ... Do something ...

    if(keepGoing) {
        setTimeout(myLoop, 1000);
    }
}

function startLoop() {
    keepGoing = true;
    myLoop();
}

function stopLoop() {
    keepGoing = false;
}

---

변수를 사용하여 "완료"를 추적 한 다음 루프가 반복 될 때마다 테스트해야합니다. 완료되면 == true이면 반환됩니다.

var done = false;

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

setBgPosition(); // start the loop

setTimeout( function(){ done = true; }, 5000 ); // external event to stop loop

---

타임 아웃 루프를 처리하는 가장 간단한 방법

function myFunc (terminator = false) {
    if(terminator) {
        clearTimeout(timeOutVar);
    } else {
        // do something
        timeOutVar = setTimeout(function(){myFunc();}, 1000);
    }
}   
myFunc(true); //  -> start loop
myFunc(false); //  -> end loop

---

extjs 태그로 태그가 지정되었으므로 extjs 메서드를 살펴볼 가치가 있습니다. http://docs.sencha.com/extjs/6.2.0/classic/Ext.Function.html#method-interval

이것은 setInterval과 매우 유사하게 작동하지만 범위도 처리하고 인수도 전달할 수 있습니다.

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 Ext.Function.interval(run,200);
}

var bgPositionTimer = setBgPosition();

중지하고 싶을 때 사용 clearInterval하여 중지 할 수 있습니다.

clearInterval(bgPositionTimer);

사용 사례의 예는 다음과 같습니다.

Ext.Ajax.request({
    url: 'example.json',

    success: function(response, opts) {
        clearInterval(bgPositionTimer);
    },

    failure: function(response, opts) {
        console.log('server-side failure with status code ' + response.status);
        clearInterval(bgPositionTimer);
    }
});

---

잘 모르겠지만 원하는 것일 수 있습니다.

var c = 0;
function setBgPosition()
{
    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)
        {
            setTimeout(run, 200);
        }
        else
        {
            Ext.get('common-spinner').setStyle('background-position', numbers[0] + 'px 0px');
        }
    }
    setTimeout(run, 200);
}
setBgPosition();

참조 URL : https://stackoverflow.com/questions/8443151/how-to-stop-a-settimeout-loop