我正在开发一个倒计时器，这需要一个动态unix标记并将其应用到页面上的一些javascript以显示倒计时(使用简单的间隔函数)。
我设置了一个获取请求，每隔 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);
}
}
}
最佳答案
zInterval 需要在更高级别的范围内定义，它可以在您的间隔期间持续。现在，它位于本地函数内部，并且超出了范围，并在您需要它之前被垃圾收集。
由于我在这里看不到代码的整个范围，我的猜测是将其放在 zTime() 声明之外:
zIntervalActive = false;
var zInterval;
然后，在分配 zInterval 时从 zInterval 中删除 var，以便使用之前定义的变量，而不是重新定义新的局部变量:
zTimeInterval = setInterval(...);
关于javascript - 停止两个间隔同时运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32159605/