Как сломать цикл с вложенной функцией setTimeout () в JavaScript? - PullRequest
Новая
       20

Как сломать цикл с вложенной функцией setTimeout () в JavaScript?

0 голосов
/ 22 мая 2019

Ситуация

У меня есть функция, которая вызывается при нажатии кнопки и которая должна рисовать анимированный график, обновляя график каждые 2 секунды.Когда пользователь нажимает эту кнопку еще раз, пока анимация еще продолжается, анимация должна остановиться.

Мое текущее решение

Сейчас у меня есть следующий скрипт, который визуально останавливает анимацию, но основной цикл for продолжается до конца на заднем плане: 

var animRun = false;
$("#animateButton").on("click", function() {
    if (animRun === false) {
        redraw(data.slice(0,30))
        //some CSS...

    } else {
        //Some CSS...
        animRun = false;
    }
});

function redraw(data) {
    animRun = true;

    for (var i=0; i<data.length;i++){

        (function(i){
            setTimeout(function(){
                if(animRun === true) {
                    //draw the chart
                    return draw(data[i])
                }
            },2000*(i))

            if (i === data.length -1) {
                //reset animRun
                if(animRun === true) {
                     //Some CSS things
                     //...
                     animRun = false;
                 }
            }
        })(i);
    }


}

Вопрос

Каким будет правильный способ остановки цикла for, когда пользователь снова нажимает кнопку, пока анимация еще выполняется?

1 Ответ

1 голос
/ 22 мая 2019

Вы пробовали clearTimeout. Сохраните время ожидания отрисовки в массиве и остановите его, когда закончите 

var animRun = false;
var drawArr = [];
$("#animateButton").on("click", function() {
    if (animRun === false) {
        redraw(data.slice(0,30))
        //some CSS...

    } else {
        //Some CSS...
        animRun = false;

        drawArr.forEach(d=>clearTimeout(d));
    }
});

function redraw(data) {
    animRun = true;

    for (var i=0; i<data.length;i++){

        (function(i){
            drawArr[i] = setTimeout(function(){
                if(animRun === true) {
                    //draw the chart
                    return draw(data[i])
                }
            },2000*(i))

            if (i === data.length -1) {
                //reset animRun
                if(animRun === true) {
                     //Some CSS things
                     //...
                     animRun = false;
                 }
            }
        })(i);
    }


}
...