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

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 未定义 - 这是因为倒计时函数在 interval 之前运行已声明。

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

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

我该如何解决这个问题？

Answer 1

添加var:

var interval = setInterval(countdownProcessor,1000);

这使得 interval 对正在运行的每个倒计时都是局部的，而不是对整个页面是全局的。