0

秒数で初期化してから、カウントダウンする新しい「秒数」で新しい呼び出しを行うことにより、いつでもリセットできるタイマーウィジェットを作成しようとしています。これまでのところ、タイマーをうまく作成してカウントダウンするこれがあります。

私がやろうとしているのは、最初に _create メソッド内で _destroy メソッドを呼び出して、既に要素にあるタイマーを削除し、window.clearInterval を使用してタイマーの再追加を停止することです。this.interval は _start メソッドで設定され、_destroy メソッドで参照されますが、問題は this.interval のスコープにあると思います。

これは私がこれまでに持っているものですが、_destroy メソッドが間隔をクリアしていないようで、その理由がわかりません。

$.widget('time.countdown', {

    options : {
        remaining : (2 * 24 * 60 * 60 * 1000),
        updatefreq: 1000
    },

    _create : function () {
        'use strict';
        this._destroy();
    },

    _start: function () {
        'use strict';
        var secs = this.options.remaining;

        this.interval = window.setInterval((function (elem, secs) {

            return function () {

                secs -= 1;

                var days     = Math.floor(secs / (24 * 60 * 60)),
                    div_hr   = secs % (24 * 60 * 60),
                    hours    = Math.floor(div_hr / (60 * 60)),
                    div_min  = secs % (60 * 60),
                    minutes  = Math.floor(div_min / 60),
                    div_secs = div_min % 60,
                    seconds  = Math.ceil(div_secs),
                    time_parts = {
                        "d": days,
                        "h": hours,
                        "m": minutes,
                        "s": seconds
                    },
                    tstring = '',
                    c;

                for (c in time_parts) {
                    if (time_parts.hasOwnProperty(c)) {
                        tstring += time_parts[c] + c + ' ';
                    }
                }

                elem.html(tstring);
            };

        }(this.element, secs)), this.options.updatefreq);
    },

    _destroy: function() {
        'use strict';
        if (this.interval !== undefined) {
            window.clearInterval(this.interval);
        }
        this.element.html('');
    }

});

誰でもこれに光を当てることができますか？

4

1 に答える 1

2

コードで奇妙なことは、「プライベート」_start()関数への呼び出しがないことですが、nvm.

reset()次のパブリック関数を追加する必要があります。

  • 新しいremaining値を設定し、
  • クリアインターバル、
  • _start()次に関数を呼び出します

その後、必要に応じてこのreset()関数を呼び出す必要があります。このコードと以下の説明をご覧ください。

(function($) {

    $.widget('time.countdown', {

        options : {
            remaining : (2 * 24 * 60 * 60 * 1000),
            updatefreq: 1000
        },

        _create : function () {
            'use strict';
            this._start();
        },

        _setOption: function(key, value) {
            key == 'remaining' ?
                this.reset(value) :
                this._super(key, value);
        },

        _start: function () {
            'use strict';
            // your countdown code
        },

        reset: function(remaining) {
            // You should perform some checks on the given value
            this.options.remaining = remaining;
            this._destroy();
            this._start();
        },

        _destroy: function() {
            'use strict';
            if (this.interval !== undefined)
                window.clearInterval(this.interval);
            this.element.html('');
        }
    });

})(jQuery);

この_create()関数は、作成時に一度だけ呼び出されることに注意してください。したがって、プラグインを同じ要素に引数なしで何度も適用すると、$('#timer').countdown();は_start()一度だけ呼び出されます (最初の呼び出しで)。

さまざまな方法で新しい値でカウントダウンをリセットできるようになりました。

// new value to set = 3600

// Call to the "public" `reset()` function
$('#timer').countdown('reset', 3600);

// Call to the `_setOption()`
$('#timer').countdown({remaining: 3600});

// Call to the `_setOption()` 
$('#timer').countdown('option', 'remaining', 3600);
于 2014-01-16T15:11:46.347 に答える