TimeCircle - 不会更新为新值

Question

我正在使用jquery TimeCircles TimeCircle github,我正在尝试做两件事而不确定我是否正确的方法.首先,我试图在创建TimeCircle实例后动态设置倒计时值.据我所知,在启动时,它会在标签中查找data-timer attr.但是,我正在尝试动态更新该值.我有一个setTimer调用一个方法,该方法对服务进行ajax调用,返回TimeCircle应该倒计时的分钟数(下面的'd'参数).我确认我从该服务电话获得了一个值.但我无法用该值"刷新"TimeCircle.我是否需要销毁它并重建实例才能刷新？任何帮助是赞赏的伙伴们!

其次,我试图根据日和/或小时是否有"零"来动态显示日期和小时圈.换句话说,如果日或小时为零,则没有理由显示圆圈.罢工两次 - 也没有成功.

在此先感谢任何帮助和TimeCircles的作者(好东西!).

function doCircleTimer(d) {

var dd = d;
if (dd == undefined) {
    dd = $('div#CountDownTimer', window.parent.document).data('timer');
}
var _timer = $('div#CountDownTimer', window.parent.document);

_timer = $('div#CountDownTimer', window.parent.document).attr('data-timer', dd);


_timer.TimeCircles({ time: { Days: { show: true }, Hours: { show: true }, Minutes: { color: '#4D8DC1' }, Seconds: { color: '#4D8DC1'}} })
.addListener(
function (unit, value, total) {
    //hide days
    if (total < 86400) {
        _timer.TimeCircles({ time: { Days: { show: false }, Hours: { show: true,  color: '#900' }, Minutes: { color: '#900' }, Seconds: { color: '#900'}} })

    }
     if (total < 3600) {

        _timer.TimeCircles({ time: { Days: { show: false, color: '#900' }, Hours: { show: false, color: '#900' }, Minutes: { color: '#900' }, Seconds: { color: '#900'}} })
    } 
    if (total == 120) {
        _timer.data('timer', 120);
        alert("Two-Minute Warning!");
        _timer.TimeCircles({ time: { Days: { show: false }, Hours: { show: false }, Minutes: { color: '#900' }, Seconds: { color: '#900'}} })
    } else if (total == 30) {
        alert('Your session will expire in 30 seconds, you should save your work and / or  reload the page.');
    } else if (total == 0) {

        alert("Time Expired");

    }
}
);
}

Answer 1

我是TimeCircles的创造者.

我注意到的第一件事就是,为了在跑步时移除一个圆圈,你需要打电话.rebuild().

此外,由于使用了<运算符,您每隔一秒就会重新设置一次配置.其他的东西:当你达到120时,你似乎将时间设置为120,我不明白你在那里做什么.

最后,你似乎可以用的混合.data()和.attr('data'...你应该意识到的是,改变.data不会产生影响.attr,.attr也不会产生影响.data.

现在,如果我理解正确的话 - 在已经实例化TimeCircles之后调用此函数.在这种情况下,我会建议这样的事情:

        var listenerAdded = false;

        function listener(unit, value, total) {
            if(total === 86399 || total === 3599) {
                $(this).TimeCircles().destroy();
                $(this).data('timer', total + 1).TimeCircles(getConfig(total));
            }
            if(total == 120) {
                alert("Two-Minute Warning!");
            }
            else if(total == 30) {
                alert('Your session will expire in 30 seconds, you should save your work and / or  reload the page.');
            }
            else if(total == 0) {
                alert("Time Expired");
            }
        }

        function getConfig(seconds) {
            var config = { time: {
                Days: { show: true },
                Hours: { show: true },
                Minutes: { show: true, color: '#4D8DC1' },
                Seconds: { show: true, color: '#4D8DC1' },
            }};
            if(seconds <= 86400) {
                config.time.Days.show = false;
                config.time.Seconds.color = "#900";
                config.time.Minutes.color = "#900";
                if(seconds <= 3600) {
                    config.time.Hours.show = false;
                }
                else {
                    config.time.Hours.color = "#900";
                }
            }
            return config;
        }

        function doCircleTimer(d) {

            var $timer = $('div#CountDownTimer', window.parent.document);
            var dd = d;
            if (dd == undefined) {
                dd = $timer.data('timer');
            }

            $timer.data('timer', dd);
            var tc = $timer.TimeCircles(getConfig(dd)).rebuild().restart();
            if(!listenerAdded)
                tc.addListener(listener);
        }