Countdown.js reset time

Question

Hello I try to start and reset the counter from countdown.js with pressing one button.

When I press the button a second time it starts a new timer and jump between the old timer and new one.

I would like to clear the timer / reset the timer and start then.

I tried using clearInterval(timeinterval); as a single button and it's not working either.

$("#reset").click(function () {
    //timer = new Countdown();
    clearInterval(timeinterval);
});

    
$("#trigger-start").click(function () {

    var check = true;

    function getTimeRemaining(endtime) {
        var t = Date.parse(endtime) - Date.parse(new Date());
        var seconds = Math.floor((t / 1000) % 60);
        var minutes = Math.floor((t / 1000 / 60) % 60);
        var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
        var days = Math.floor(t / (1000 * 60 * 60 * 24));
        return {
            'total': t,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };
    }

    function initializeClock(id, endtime) {
        var clock = document.getElementById(id);
        var daysSpan = clock.querySelector('.days');
        var hoursSpan = clock.querySelector('.hours');
        var minutesSpan = clock.querySelector('.minutes');
        var secondsSpan = clock.querySelector('.seconds');

        function updateClock() {
            var t = getTimeRemaining(endtime);

            daysSpan.innerHTML = t.days;
            hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
            minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
            secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

            if (t.total <= 0) {
                clearInterval(timeinterval);
            }
        }

        updateClock();
        var timeinterval = setInterval(updateClock, 1000);
    }

    var deadline = new Date(Date.parse(new Date()) + 20 * 24 * 60 * 60 * 1000);
    initializeClock('clockdiv', deadline);

    $(".button-content-start").toggleClass("stop");
});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clock row m-b-xl">
<div id="clockdiv">
    <div class="panel-solid-info widget-mini col-xs-3" id="canvas_days" style="padding:0 1px !important;">
        <div class="panel-body">
            <span class="total text-center val days"><span id="countdown-tage"></span></span>
            <span class="title text-center type-days type-time">Tage</span>
        </div>
    </div>
    <div class="panel-solid-info widget-mini col-xs-3" id="canvas_hours" style="padding:0 1px !important;">
        <div class="panel-body">
            <span class="total text-center val hours"><span id="countdown-stunden"></span></span>
            <span class="title text-center type-hours type-time">Stunden</span>
        </div>
    </div>
    <div class="panel-solid-info widget-mini col-xs-3" id="canvas_minutes" style="padding:0 1px !important;">
        <div class="panel-body">
            <span class="total text-center val minutes"><span id="countdown-minuten"></span></span>
            <span class="title text-center type-minutes type-time">Minuten</span>
        </div>
    </div>
    <div class="panel-solid-info widget-mini col-xs-3" id="canvas_minutes" style="padding:0 1px !important;">
        <div class="panel-body">
            <span class="total text-center val seconds"><span id="countdown-sekunden"></span></span>
            <span class="title text-center type-seconds type-time">Sekunden</span>
        </div>
    </div>
</div>
</div>

<button class="btn btn-success btn-lg col-xs-12 col-sm-6 col-sm-offset-3" data-toggle="modal" data-target="#formModal"
    id="trigger-start"><i class="button-content-start">Start</i></button>

thanks in advance

Answer 1

the problem is that setInterval continued executed the function. In the next start, two setInterval are executing.

Try this solution. idinterval is id function, kill to press start if !== false(initiale value) . Example: https://jsfiddle.net/Cuchu/wu7spkw8/

var idinterval = false;
$("#reset").click(function () {
    //timer = new Countdown();
    clearInterval(timeinterval);
});

$("#trigger-start").click(function () {

    var check = true;
    if(idinterval !== false) {
        clearInterval(idinterval);
    }
    var deadline = new Date(Date.parse(new Date()) + 20 * 24 * 60 * 60 * 1000);
    idinterval = initializeClock('clockdiv', deadline);

    alert(idinterval);

    $(".button-content-start").toggleClass("stop");
});

    function getTimeRemaining(endtime) {
        var t = Date.parse(endtime) - Date.parse(new Date());
        var seconds = Math.floor((t / 1000) % 60);
        var minutes = Math.floor((t / 1000 / 60) % 60);
        var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
        var days = Math.floor(t / (1000 * 60 * 60 * 24));
        return {
            'total': t,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };
    }

    function initializeClock(id, endtime) {
        var clock = document.getElementById(id);
        var daysSpan = clock.querySelector('.days');
        var hoursSpan = clock.querySelector('.hours');
        var minutesSpan = clock.querySelector('.minutes');
        var secondsSpan = clock.querySelector('.seconds');

        function updateClock() {
            var t = getTimeRemaining(endtime);

            daysSpan.innerHTML = t.days;
            hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
            minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
            secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

            if (t.total <= 0) {
                clearInterval(timeinterval);
            }
        }

        updateClock();
        var timeinterval = setInterval(updateClock, 1000);
        return timeinterval;
    }