Question

我正在使用倒数计时器，这需要一个动态的unix标记并将其应用到页面上的某个javascript以显示倒计时（使用简单的间隔函数）。

我设置了一个get请求，每10秒左右发送一次以检查新数据，如果存在新数据，则应停止当前倒计时间隔，并使用新数据启动新的数据。我已经设置了一个变量，以便在页面加载时“基”这个值，这样我就可以检测到值何时发生变化并开始新的间隔。

目前，每次收到新数据时，新的间隔开始，所以数字才会在屏幕上开始闪烁。

我无法弄清楚为什么会这样做，有什么想法吗？

// main function for checking for new data every 10 seconds 

zIntervalActive = false; // for checking if interval is active or not
  function zTime() {
        return $.ajax({
            type: 'get',
            data: "q=" + baseTime,
            url: 'clockcalculator3.php',
            success: function(results) {
                var futureUnix = Number(results);
                console.log(results + typeof(results));
                console.log(futureUnix);
                if (futureBase == futureUnix) {
                    if (zIntervalActive === false) {
                        var zTimeInterval = setInterval(function() {MModeTimer(futureUnix)}, 1000);

                }
                    else {

                    }
                }

                else {
                    clearInterval(zTimeInterval);
                    zIntervalActive = false;
                    futureBase = futureUnix;
                    var zTimeInterval = setInterval(function() {MModeTimer(futureUnix)}, 1000);

                }


            },
            complete: function(data) {

                setTimeout(zTime, interval);
            },
            error: function() {

            }
        });
    }

 //   function to "base" the value initially on page load

function zTimeStart() {
        return $.ajax({
            type: 'get',
            data: "q=" + baseTime,
            url: 'clockcalculator3.php',
            success: function(results) {
                futureBase = Number(results);
                console.log("ztime start" + results + typeof(results));
                console.log("ztime start" + futureBase);
            },                
            error: function() {

            }
        });
    }

 //   clock countdown function (fired as an interval)

function MModeTimer(futureDate) {
zIntervalActive = true;  
var currentTime = new Date().getTime() / 1000;
var timeRemaining = futureDate - currentTime;
var minute = 60;
var hour = 60 * 60;
var day = 60 * 60 * 24;
var zDays = Math.floor(timeRemaining / day);
var zHours = Math.floor((timeRemaining - zDays * day) / hour);
var zMinutes = Math.floor((timeRemaining - zDays * day - zHours * hour) / minute);
var zSeconds = Math.floor((timeRemaining - zDays * day - zHours * hour - zMinutes * minute));

if (zSeconds <= 0 && zMinutes <= 0) {
    console.log("timer in negative");

clearInterval(zTimeInterval);


} else {

if (futureDate > currentTime) {
     $(".zdays").html(zDays);
                $(".zhours").html(zHours);
                $(".zminutes").html(zMinutes);
                $(".zseconds").html(zSeconds);

}

    }


}

Answer 1

zInterval需要在更高级别的范围内定义，它可以在您的间隔期间持续。现在，它在一个本地函数内部，它超出范围，并在您需要之前进行垃圾收集。

由于我无法在此处看到您的代码的整个范围，我的猜测是在此之后将其置于zTime()声明之外：

zIntervalActive = false;
var zInterval;

然后，在分配时从zInterval中删除var，以便使用先前定义的变量，而不是重新定义新的局部变量：

zTimeInterval = setInterval(...);

停止两个间隔同时运行

1 个答案: