Count Down Timer???

[Gilmax]

I'm not putting this in as a feature request, as I don't think this is something that should be supported, but I am asking for help anyways. In the desktop version of Scoreboard Assistant there was the option to create timers, which we used heavily in our streams. With the new online version, I understand why it was removed, but I am trying to come up with a solution. The main problem is that I am not a web developer, so I am hoping that I am missing something simple.

I have created a page that has two fields "timelimit" and "timer" Timelimit is a text field that is used to set how long the timer needs to be set for, and Timer is a checkbox to turn the timer on/off. I then have the following code in the JS section for this page.

if ($('#timer_1').text() != docData['timer_1'] &&
    (docData['timer_1'] == false) )
{
    $('body')
        .queue(elemHide('.timer')).delay(1000)
        .queue(elemUpdate());
}

if ($('#timer_1').text() != docData['timer_1'] &&
    (docData['timer_1'] == true) )
{
    startTimer(parseInt(docData['timelimit_1']), timer_1);
    $('body')
        .queue(elemUpdate()).delay(1000)
        .queue(elemShow('.timer'));
}

function startTimer(duration, display) {
    var timer = duration*60;
    var minutes, seconds;
    nInterval = setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;
        if (timer == 0)
        {
            clearInterval(nInterval);
        }
        --timer;
    }, 1000);
}

The issue that I have is if I turn off the timer, and then turn it back on, it will flip between the old time and the new time. What I am wanting is that when the timer is turned off/hidden that the timer stops, and then when it is turned on/shown that a new timer is started.

Thank you for any help you can offer on this issue.

 

[Jaxel]

Can you give me your package ID, so I can take a look at it?

Your package ID is the number at the end of the URL to your package control panel.

 

[Gilmax]

I made you an editor of the package if that helps.

 

[Jaxel]

I took a look at it, and the reason it was doing this is you were basically creating a new timer every time you checked it. By hardcoding your timer to this however, you can ensure the original timer is overwritten.

I rewrote your code entirely however. Since what you are doing was actually re-chaining animations every 1 second... and that would lead to memory leaks on your browser/obs.

 

[Gilmax]

Thank you for taking a look at this, and fixing it. It is working as expected.

 

[abtaster]

hi, we really need a timer too. is it possible to offer the working script?
thanks

 

[Gilmax]

Sorry, have been offline for a while. Here is the script.

var timer_int = null;

if (docData['timer_1'] == true)
{
var timer_cnt = parseInt(docData['timelimit_1']) * 60;

updateTimer(timer_cnt);
$('body').queue(elemShow('.timer'));

this.timer_int = setInterval(function ()
{
timer_cnt--;
updateTimer(timer_cnt);
}, 1000);
}

if (docData['timer_1'] == false)
{
clearInterval(this.timer_int);
$('body').queue(elemHide('.timer'));
}

function updateTimer(counter)
{
let minutes = Math.floor(counter / 60).toString(),
seconds = (counter % 60).toString();

$('#countdown').text(minutes.padStart(2, '0') + ":" + seconds.padStart(2, '0'));
}