JS clearinterval()不工作，coundown计时器显示旧的和最近的剩余天数

Question

我正在制作一个简单的倒计时计时器，用户输入日期和月份，然后网站显示距离活动还有多少天和小时。

我的问题是，当用户设置了一个日期，但随后他将其更改为另一个日期时，我的代码显示剩余的两天

html代码：

<h1>Calander</h1>
<input id="inputday" type="text" placeholder="day">
<input id="inputMonth" type="text" placeholder="month">
<p id="output"></p>

JS代码：

let inputM
let inputDay
const inputYear = 2022
let runOrNot = 0
let log = 0
document.getElementById('inputMonth').addEventListener('keyup', event => {
inputM = event.target.value
runOrNot++
console.log(runOrNot)
if (runOrNot > 2) {
clearInterval() //not working
run()
}
})
document.getElementById('inputday').addEventListener('keyup', e => {
inputDay = e.target.value
runOrNot++
console.log(runOrNot)
if (runOrNot > 3) {
clearInterval() //not working
run()
}
})
function run() {
//clearInterval() //doesnt work
console.log(inputM)
console.log(inputDay)

const countDownDate = new Date(`${inputM} ${inputDay}, ${inputYear}`).getTime();

// Update the count down every 1 second
const x = setInterval(function() {

// Get today's date and time
const now = new Date().getTime();

// Find the distance between now and the count down date
const distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

// Output the result
document.getElementById("output").innerHTML = days + "d " + hours + "h "
+ minutes + "m ";

// If the count down is over, write some text 
if (distance < 0) {
clearInterval(x);
document.getElementById("output").innerHTML = "EXPIRED";
}
}, 1000);
}

Answer 1

clearInterval在没有参数的情况下不起作用。您应该为intervalId添加全局变量。

let inputM
let inputDay
const inputYear = 2022
let runOrNot = 0
let log = 0
document.getElementById('inputMonth').addEventListener('keyup', event => {
inputM = event.target.value
runOrNot++
console.log(runOrNot)
if (runOrNot > 2) {
clearInterval(intervalId) //not working
run()
}
})
document.getElementById('inputday').addEventListener('keyup', e => {
inputDay = e.target.value
runOrNot++
console.log(runOrNot)
if (runOrNot > 3) {
clearInterval(intervalId) //not working
run()
}
})
var intervalId;
function run() {
clearInterval(intervalId) //doesnt work
console.log(inputM)
console.log(inputDay)

const countDownDate = new Date(`${inputM} ${inputDay}, ${inputYear}`).getTime();

// Update the count down every 1 second
intervalId = setInterval(function() {

// Get today's date and time
const now = new Date().getTime();

// Find the distance between now and the count down date
const distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

// Output the result
document.getElementById("output").innerHTML = days + "d " + hours + "h "
+ minutes + "m ";

// If the count down is over, write some text 
if (distance < 0) {
clearInterval(intervalId);
document.getElementById("output").innerHTML = "EXPIRED";
}
}, 1000);
}

<h1>Calander</h1>
<input id="inputday" type="text" placeholder="day">
<input id="inputMonth" type="text" placeholder="month">
<p id="output"></p>

Answer 2

clearInterval()需要setInterval:返回一个间隔ID

clearInterval(intervalID)intervalID要取消的重复操作的标识符。此ID是由对setInterval((的相应调用返回的。

代码只使用一个间隔并不重要，您必须将间隔ID传递给clearInterval。

const interval_id = setInterval(function() {
console.log("Do something")
}, 1000)
// code ...
// stop the interval created earlier
clearInterval(interval_id)