好的，我稍作改动以使用 Promise 类。它非常有用，我强烈建议您学习一下，尤其是在处理异步事件时（例如 setInterval）。
所以在你的第一个函数中，我简化为 2 行，然后添加如下：
function startMinuteTimer(duration, display) {
var timer = duration;
var minutes, seconds;
return new Promise( (resolve, reject) => {
let interval = setInterval(() => {
// timer comes in as a number, not string (no parseInt needed)
seconds = timer % 60;
seconds = seconds < 10 ? "0" + seconds : seconds;
// you don't need an empty space in this string
display.textContent = "" + seconds;
if (--timer < 0) {
timer = duration;
// clear interval so this specific instance doesn't keep looping
clearInterval(interval);
// tell promise we're ready to move on.
resolve();
}
}, 1000);
});
};
然后我添加了一个名为 displayWorkout 的函数，它应该循环遍历给定的锻炼标题数组，并显示它们，同时还调用你的第一个函数 startMinuteTimer 以显示每分钟的倒计时：
function displayWorkout(workouts, index=0) {
var oneMinute = 60 * 1,
display = document.querySelector('#minutetime');
return new Promise( (resolve, reject) => {
// check if there are more workouts to display
if (index < workouts.length) {
// put workout text in html
document.getElementById("workouts").innerHTML = workouts[index];
// now start the timer
startMinuteTimer(oneMinute, display)
.then(() => {
// after 1 minute, call displayWorkout again to display
// next workout in list
return displayWorkout(workouts, index + 1);
})
.then(() => {
// once the next workout is done displaying, this promise is done.
resolve();
});
} else {
// no more workouts -> this set of workouts is done.
resolve();
}
});
}
最后，在onload 中，我只是设置了数组并将它异步传递给displayWorkout 三次（使用Promises）。我添加了console.log 语句，以显示第 1、2 和 3 轮何时完成：
window.onload = function() {
var workouts = [
"Goblet Squat", "Mountain Climber", "Single-Arm Dumbbell Swing",
"T-Pushup", "Split Jump", "Dumbbell Row",
"Dumbbell Side Lunge and Touch", "Pushup-Position Row",
"Dumbbell Lunge and Rotation", "Dumbbell Push Press"
];
console.log('starting round 1!');
displayWorkout(workouts)
.then(() => {
console.log('starting round 2!');
return displayWorkout(workouts);
})
.then(() => {
console.log('starting round 3!');
return displayWorkout(workouts);
})
.then(() => {
console.log('done!');
});
};
所以把它们放在一起，只需复制以下代码：
function startMinuteTimer(duration, display) {
var timer = duration;
var minutes, seconds;
return new Promise( (resolve, reject) => {
let interval = setInterval(() => {
// timer comes in as a number, not string (no parseInt needed)
seconds = timer % 60;
seconds = seconds < 10 ? "0" + seconds : seconds;
// you don't need an empty space in this string
display.textContent = "" + seconds;
if (--timer < 0) {
timer = duration;
// clear interval so this specific instance doesn't keep looping
clearInterval(interval);
// tell promise we're ready to move on.
resolve();
}
}, 1000);
});
};
function displayWorkout(workouts, index=0) {
var oneMinute = 60 * 1,
display = document.querySelector('#minutetime');
return new Promise( (resolve, reject) => {
// check if there are more workouts to display
if (index < workouts.length) {
// put workout text in html
document.getElementById("workouts").innerHTML = workouts[index];
// now start the timer
startMinuteTimer(oneMinute, display)
.then(() => {
// after 1 minute, call displayWorkout again to display
// next workout in list
return displayWorkout(workouts, index + 1);
})
.then(() => {
// once the next workout is done displaying, this promise is done.
resolve();
});
} else {
// no more workouts -> this set of workouts is done.
resolve();
}
});
}
window.onload = function() {
var workouts = [
"Goblet Squat", "Mountain Climber", "Single-Arm Dumbbell Swing",
"T-Pushup", "Split Jump", "Dumbbell Row",
"Dumbbell Side Lunge and Touch", "Pushup-Position Row",
"Dumbbell Lunge and Rotation", "Dumbbell Push Press"
];
console.log('starting round 1!');
displayWorkout(workouts)
.then(() => {
console.log('starting round 2!');
return displayWorkout(workouts);
})
.then(() => {
console.log('starting round 3!');
return displayWorkout(workouts);
})
.then(() => {
console.log('done!');
});
};