javascript - DOM Loaded のタイムスタンプの問題

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));