我有一个计数器。计数器将从25开始倒计时。时间到了，它将从10开始倒计时。当这段时间结束时，它将再次从25开始倒计时。事情就是这样发展的。我该怎么做？
var interval10 = 10000;
var interval = 25000;
function tensecond() {
var remaining = interval10 - (Date.now() % interval10);
}
setInterval(function () {
if (remaining >= 100) {
document.getElementById("timer").innerText =
millisToMinutesAndSeconds(remaining);
} else {
reset();
}
}, 100);
function reset() {
var remaining = interval - (Date.now() % interval);
}
setInterval(function () {
if (remaining >= 100) {
document.getElementById("timer").innerText =
millisToMinutesAndSeconds(remaining);
} else {
tensecond();
}
}, 100);
function millisToMinutesAndSeconds(millis) {
var seconds = Math.floor((millis % 60000) / 1000);
return (seconds < 10 ? "0" : "") + seconds;
}
我不完全确定您在代码中试图做什么。如果你每秒跑一次间歇，并记录下你在哪个计数器中以及还剩多少时间，这会更容易。像这样：
let timeLeft = 25;
let counter = false; // false = 25 sec counter, true = 10 sec counter
setInterval(() => {
if (timeLeft !== 0) return timeLeft--;
if (!counter) {
timeLeft = 10;
counter = true;
// do some more stuff
} else {
timeLeft = 25;
counter = false;
// do some more stuff
}
}, 1000);
也许您已经考虑过这样的实现？每个任务触发以下
const interval10 = 1000;
const interval = 2500;
let remaining;
function print(rem, type) {
if (remaining >= rem) {
document.getElementById("timer").innerText =
millisToMinutesAndSeconds(remaining);
} else {
if (type === '25') {
reset()
} else {
tensecond()
}
}
}
function tensecond() {
remaining = interval10 - (Date.now() % interval10);
}
function run25() {
setTimeout(function () {
print(100, '25')
run10()
}, interval);
}
function run10() {
setTimeout(function () {
print(100, '10')
run25()
}, interval10);
}
function reset() {
remaining = interval - (Date.now() % interval);
}
function millisToMinutesAndSeconds(millis) {
const seconds = Math.floor((millis % 60000) / 1000);
return (seconds < 10 ? "0" : "") + seconds;
}
run25();
- 删除重复代码
处理此问题的最佳方法是使用promise。每一个倒计时都是一个承诺，一旦定时器到期，它就会解决。通过这种方式，您可以链接任意数量的计时器。
SPEED = 100 // set to 1000 to use seconds
function timer(secs, target) {
let endTime = Number(new Date()) + (secs + 1) * SPEED
return new Promise(resolve => {
function step() {
let now = Number(new Date())
if (now >= endTime) {
target.innerText = '0'
return resolve()
}
target.innerText = Math.floor((endTime - now) / SPEED)
window.requestAnimationFrame(step)
}
step()
})
}
async function loop() {
while (1) {
await timer(30, document.querySelector('#a'))
await timer(20, document.querySelector('#b'))
await timer(10, document.querySelector('#c'))
}
}
window.onload = loop<body style="font-size: 30px">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>