Как остановить цикл setTimeout?

Question

Я пытаюсь построить индикатор загрузки со спрайтом изображения, и я придумал эту функцию

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 (); в другом месте, чтобы это продолжалось в цикле, так что теперь моя проблема заключается в том, как остановить этот цикл, как только я хочу [загрузка завершена]?

Answer 1

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 остановить вещи сам , обнаружив, что некоторое условие завершения было выполнено.

Answer 2

Я знаю, что это старый вопрос, я все равно хотел бы опубликовать свой подход.Таким образом, вам не нужно справляться с трюком 0, который выдвинул TJ Crowder.

var keepGoing = true;

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

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

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

function stopLoop() {
    keepGoing = false;
}

Answer 3

ПРОСТОЙ СПОСОБ ОБРАЩАТЬСЯ К ПЕРИОДУ ВРЕМЕНИ

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

Answer 4

Вам нужно использовать переменную для отслеживания "doneness" и затем проверять ее на каждой итерации цикла.Если сделано == 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

Answer 5

Поскольку это помечено тегом 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);
    }
});

Answer 6

Я не уверен, но может быть то, что вы хотите:

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