How to stop a Javascript function that uses setTimeout

Question

Hello,

I have created a countdown function, which is working correctly. The only problem is that I can’t stop it. I made all kinds of adaptation with Return and clearInterval(), she stops for a second and then immediately back 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);
    }

Answer 1

Just to give you a little light in the tunnel

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

Answer 2

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>
<h1 id="clock">55:00</h1>
<button class="play">Play</button>
<button class="pause">Pause</button>

Note

I commented on the part of the call if your duties, because I do not know what they are or what they do.