Question

我正在编写一个用于圆形量规的jQuery小部件（CSS3增长的边界半径，旋转和剪辑）。我在页面上有很多CSS / images / js。

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

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

我遇到了一些时间戳问题，而且我的代码运行不正常。时间戳timerFinish总是低于新的时间戳，因此秒变量是负数，百分比总是优于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));

DOM Loaded上的时间戳问题

0 个答案: