Question

以下jquery代码在所有匹配的元素上启动计时器

$.each($('.product, #auction-div'), function () {
    var deadline = new Date(0);
    deadline.setUTCMilliseconds($(this).find('input[name=startDate]').val());
    initializeClock($(this).find('.clockdiv'), deadline);
});

稍后我的页面收到更新，更新包含更新的倒计时时间。我必须调用initializeClock函数，剩下当前的倒计时时间，如下一个代码所示。

        success: function (data) {
            comet = subscribe();
            var auction = data.auction;
            if (auction) {
                var productBox = $('#' + data.auction.uid);
                productBox.find('.timer').html('09');
                productBox.find('.auction-price, #auction-price').html('KSh.' + data.auction.auctionValue);
                audio.play();
                var deadline = new Date(0);
                deadline.setUTCMilliseconds(data.countdown);
                initializeClock(productBox.find('.clockdiv'), deadline);
            }
        },

这是initializeClock和其他相关功能的代码

//    code for countdown timer
    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));
        if (t < 0) {
            days = hours = minutes = seconds = 0;
        }
        return {
            'total': t,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };
    }
    function initializeClock(clock, endtime) {
        var daysSpan = clock.find('.days');
        var hoursSpan = clock.find('.hours');
        var minutesSpan = clock.find('.minutes');
        var secondsSpan = clock.find('.seconds');
        function updateClock() {
            var t = getTimeRemaining(endtime);
            daysSpan.html(t.days);
            hoursSpan.html(('0' + t.hours).slice(-2));
            minutesSpan.html(('0' + t.minutes).slice(-2));
            secondsSpan.html(('0' + t.seconds).slice(-2));
            if (t.total <= 0) {
                clearInterval(timeinterval);
            }
        }
        updateClock();
        var timeinterval = setInterval(updateClock, 1000);
    }

不幸的是，这会导致在clockDiv上初始化多个时钟，倒计时会逐渐变得混乱。

我在随后初始化时钟之前尝试了以下方法

.clearQueue()
并调用.stop()，即使它是动画我必须尝试`
接下来我不想尝试删除包含时钟div的父元素，并再次替换它以查看是否会取消绑定绑定事件。

与此同时，我希望有一个优雅的解决方案。

PS我没有引用我可以调用clearInterval(timeinterval);的任何变量，所以我们不要再纠缠于此。

Answer 1

您需要将timer属性设置为元素本身，以便下次可以使用它。

function initializeClock(clock, endtime) {
    var timeinterval = clock.prop( "clockTimer" );
    if ( timeinterval )
    {
        return; //timer already started on this, so no need to create a new one
    }
    //rest of the code

    timeinterval = setInterval(updateClock, 1000);
    clock.prop( "clockTimer", timerInterval );
}

如何停止元素上的计时器功能

您可以实施stop功能

function stopTimer( clock )
{
        var timeinterval = clock.prop( "clockTimer" );
        if ( timeinterval )
        {
            clearInterval( timeInterval );
        }
}

Answer 2

不幸的是，initializeClock没有返回计时器句柄，也没有将它存储在您可以访问它的任何地方。所以你有两个选择：

如果您有权访问initializeClock（或者可以告诉有权访问它的人修改它），请修改它以便将计时器句柄存储在相关元素上（可能使用jQuery＆＃ 39; s data方法）。然后你可以检索它并在开始下一个间隔计时器之前清除它。
如果您无法访问它，非常糟糕选项比＃1更删除元素并将其替换为克隆（通过jQuery＆＃39） ; s clone和replaceWith方法）。这样，虽然旧的间隔计时器仍在运行（我们无法阻止它），但它更新的元素不再在DOM中，也不再显示在页面上。

＃2是一种解决方法，而不是一种解决方案，因为随着时间的推移，你会建立间隔计时器，这些计时器正在无缘无故地工作。

如何在元素上停止计时器功能

2 个答案: