0

我正在为圆形仪表编写一个 jQuery 小部件（CSS3 随边框半径、旋转和剪辑而增长）。我在页面上有很多 CSS/images/js。

如果我在 DOM 加载时执行小部件代码：

$(document).ready(function(){
  $(".gauge").gauge();
});

我遇到了一些时间戳问题，我的代码运行不正常。时间戳 timerFinish 总是低于新的时间戳，所以 seconds 变量是负数，而 percent 总是优于 120/150 所以代码永远不会执行......就像 _create 函数一次运行并且第一个 setInterval （ _stopJauge fn) 运行很长时间。

但如果我这样做：

$(window).load(function(){
  $(".gauge").gauge();
});

该代码有效...

问题在于时间戳之间的差异。

如果有人对此行为有解释？

这是代码：

(function($){

    $.widget("as.gauge", {

        options: {
            timerSeconds: 3
        },

        _create: function() {
            var self = this;
            this._startTimer();
        },

        _startTimer: function(){
            var self = this;

            this.timerFinish = new Date().getTime() + (this.options.timerSeconds * 1000);
log('Timerfinish : ' + this.timerFinish)

            this.timer = setInterval(function(){
                log("milli : "+new Date().getMilliseconds())
                self._stopJauge();
            }, 50);
        },

        _endTimer: function(){
            clearInterval(this.timer);
        },

        _drawTimer: function(percent) {
            var deg = 360 / 100 * percent;
            percent = Math.round(percent);

            this.element.html('<div class="percent"></div><div id="slice"' +
                (percent > 50 ? ' class="gt50"' : '') +
                '><div class="pie"></div>' +
                (percent > 50 ? '<div class="pie fill"></div>' : '') +
                '</div>'
            ).find('#slice .pie').css({
                '-moz-transform' : 'rotate(' + deg + 'deg)',
                '-webkit-transform' : 'rotate(' + deg + 'deg)',
                '-o-transform' : 'rotate(' + deg + 'deg)',
                'transform' : 'rotate(' + deg + 'deg)'
            });
            this.element.find('.percent').html('<span class="int">' + percent + '%</span>');
        },

        _stopJauge: function(data) {
            var seconds = (this.timerFinish - new Date().getTime()) / 1000,
                percent = 100 - ((seconds / this.options.timerSeconds) * 100);
log('stopJauge - getTime : ' + new Date().getTime());
log('timerfinish - new Date() = ' + (this.timerFinish - new Date().getTime()))
log('seconds : ' + seconds)
log('percent : ' + percent)

            if (percent <= this.element.data('value')){
                this._drawTimer(percent);
            } else {
                this.element.find('.percent .int').html(this.element.data('value') + '%');
                this._endTimer();
            }
        }
    });

}(jQuery));
4

0 回答 0