Countdown.js 重置时间

Question

您好，我尝试通过按一个按钮从 countdown.js 启动和重置计数器。

当我第二次按下按钮时，它会启动一个新计时器并在旧计时器和新计时器之间跳转。

我想清除计时器/重置计时器然后开始。

我尝试使用 clearInterval(timeinterval);作为单个按钮，它也不起作用。

$("#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>

提前致谢

Answer 1

问题是 setInterval 继续执行函数。在下一次启动中，两个 setInterval 正在执行。

试试这个解决方案。 idinterval 是 id 函数，如果 !== false(initiale value) 则杀死按开始。示例：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;
    }

Answer 2

您的范围不正确。因为你说var timeinterval = setInterval(updateClock, 1000);，所以 var 是在该方法的范围内创建的，然后立即过期，因为它是方法中的最后一行。下次您尝试清除该间隔时，var 消失了。您需要将其设为全局或全局对象的属性。