同时停止运行的两个间隔

Question

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

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

目前，每次它接收到新数据时都会开始一个新的间隔，因此数字开始在屏幕上闪烁。

我不明白为什么要这样做，有什么想法吗？

// 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(...);

同时停止运行的两个间隔

Stopping two intervals from running at same time

javascript

intervals

同时停止 运行 的两个间隔

Stopping two intervals from running at same time

javascript

intervals

同时停止运行的两个间隔