Question

我有一个简单的倒计时插件，它按秒倒数计时，到达那个时候它会运行我选择的回调函数。

我今天发现的是，如果我在同一页面上有两次倒计时，并且一次倒计时结束，则会发生javascript错误，因为变量未定义，这也会打破第二次倒计时。

以下是代码：

(function($) {
$.fn.countdown = function(options, callback) {
    var $self = $(this);

    var settings = {
        'date' : null,
    }

    if(options) {
        $.extend(settings, options);
    }

    function countdownProcessor() {
        var eventDate = Date.parse(settings.date) / 1000;
        var currentDate = Math.floor($.now() / 1000);

        if (eventDate <= currentDate) {
            callback.call(this);
            clearInterval(interval);
        }

        var secondsBetween = eventDate - currentDate;

        // processing logic here.

    }

    countdownProcessor();
    interval = setInterval(countdownProcessor, 1000);
}

})(jQuery);

问题在于if语句检查以确保日期尚未发生：

if (eventDate <= currentDate) {
    callback.call(this);
    clearInterval(interval);
}

当此条件成立时，回调成功完成，但clearInterval不成功，因为未定义变量interval - 这是因为倒计时功能在声明间隔之前运行。

我尝试通过切换区间变量声明和countdownProcessor();来修复它，但这没有用，因为它只会导致第一个倒计时倒数计入负数。

我还有一些其他方法，例如更改某些代码的声明范围和顺序，但它总是导致倒计时 A）计入负数，或 B）仍然错误。

我该如何解决这个问题？

Answer 1

添加var：

var interval = setInterval(countdownProcessor,1000);

这会使正在运行的每个倒计时的interval为本地，而不是整个页面的全局。

倒计时结束案例导致Javascript错误

1 个答案: