Question

我正在尝试创建一个可以使用几秒钟进行初始化的计时器小部件，然后通过使用新的“秒数”进行新的调用来随时重置。到目前为止，我有这个创建计时器罚款和倒计时。

我要做的是首先在_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('');
    }

});

任何人都可以对此有所了解吗？

Answer 1

您的代码有些奇怪的是没有调用“私有”_start()函数，但是nvm。

您应该将公共reset()功能添加到：

设置新的remaining值
clearInterval，
然后调用_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);

jQuery小部件工厂_destroy方法

1 个答案: