How to stop a Javascript function using setTimeout

0

Hello,

I have created a countdown function, which is working correctly. The only problem is that I can not interrupt it. I made all sorts of adaptations with return and clearInterval (), it stops for a second and then returns to execution.

This is the function:

function startTimer() {
        let timeValue = $('#clock').text();
        timeValue = timeValue.split(":");
        let minutes = parseInt(timeValue[0]);
        let seconds = parseInt(timeValue[1]);

        if (minutes > 0 || seconds > 0) {
            if (seconds == 00) {
                minutes--;
                seconds = 59;
            } else {
                seconds--;
            }


            $('#clock').text((minutes > 9 ? minutes : '0' + minutes) + ':' + (seconds > 9 ? seconds : '0' + seconds));

            pomodoroPercent();
        } else {
            $('#clock').text('00:00');

            pomodoroEnd();
            return;
        }
        setTimeout(startTimer, 1000);
    }
    
asked by anonymous 14.02.2017 / 15:31

2 answers

0

I think what you want is this:

String.prototype.lpad = function(length, char){
    if(!char){
        char = 0;
    }
    var text = this.toString();
    while(text.length < length){
        text = char.toString() + text;
    }
    return text;
}

var clockPause = false;
function startTimer() {
    if(!clockPause){
        let timeValue = $('#clock').text();
        timeValue = timeValue.split(":");
        let minutes = parseInt(timeValue[0]);
        let seconds = parseInt(timeValue[1]);

        if (minutes > 0 || seconds > 0) {
            if (seconds == 00) {
                minutes--;
                seconds = 59;
            } else {
                seconds--;
            }

            $('#clock').text(minutes.toString().lpad(2) + ':' + seconds.toString().lpad(2));

            //pomodoroPercent();
        } else {
            $('#clock').text('00:00');
            //pomodoroEnd();
        }
    }
}

setInterval(startTimer, 1000);

$('.pause').on('click', function(e) {
  e.preventDefault();
  clockPause = true;
});

$('.play').on('click', function(e) {
  e.preventDefault();
  clockPause = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><h1id="clock">55:00</h1>
<button class="play">Play</button>
<button class="pause">Pause</button>

Note

I commented the part of the call if its functions, because I do not know what they are nor what they do.

    
14.02.2017 / 16:32
0

Just to give you a light at the end of the tunnel can do so

function startTimer() {
    let timeValue = $('#clock').text();
    timeValue = timeValue.split(":");
    let minutes = parseInt(timeValue[0]);
    let seconds = parseInt(timeValue[1]);

    if (minutes > 0 || seconds > 0) {
        if (seconds == 00) {
            minutes--;
            seconds = 59;
        } else {
            seconds--;
        }


        $('#clock').text((minutes > 9 ? minutes : '0' + minutes) + ':' + (seconds > 9 ? seconds : '0' + seconds));

        pomodoroPercent();
    } else {
        $('#clock').text('00:00');

        pomodoroEnd();
        clearInterval(intervalo); //supondo que seja aqui que queira para o contador
        return;
    }
}

var intervalo = setTimeout(startTimer, 1000);
    
14.02.2017 / 15:49