Question

我试图每分钟显示一次锻炼，然后重复整个阵列三次。到目前为止，我所尝试的一切都无效。我想重复三次，然后可能显示一些表示锻炼完成的东西。

function startMinuteTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    seconds = parseInt(timer % 60, 10);
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = " " + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

window.onload = function() {
  var oneMinute = 60 * 1,
    display = document.querySelector('#minutetime');
  startMinuteTimer(oneMinute, display);
};

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"];

setInterval(function() {
  document.getElementById("workouts").innerHTML = workouts.shift();
  //workouts[0].push();

}, 2000);

<body>
  <div>Complete as many reps as you can in <span id="minutetime">60</span> seconds!
  </div>
  <div><span id="workouts"></span> </div>
</body>

链接到codepen https://codepen.io/McComb/pen/MrOWbM

Answer 1

好的，我改变了一点使用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）。我在第1轮，第2轮和第3轮完成时包含了console.log语句来显示：

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!');
    });
};

Answer 2

我为你做了一个新功能。有任何问题请告诉我。

PD：解释在代码中

function startMinuteTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
    seconds = parseInt(timer % 60, 10);
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent =" " + seconds;

    if (--timer < 0) {
        timer = duration;
    }
}, 1000);
}

window.onload = function () {
var oneMinute = 60 * 1,
    display = document.querySelector('#minutetime');
startMinuteTimer(oneMinute, display);
};




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"];

//Current position 
var repetitions = 0

// array length
var _workout_length = workouts.length


startWorkout = function(){

  // if the position is greater than the array size we start over
  if(repetitions >= _workout_length) 
    repetitions = 0
    
  // then we print our result and wait 2 sec before doing it again
  document.getElementById("workouts").innerHTML = workouts[repetitions]
  repetitions++
  setTimeout(function(){    
    startWorkout()
  }, 2000)  
}
startWorkout()

<body>
<div>Complete as many reps as you can in <span id="minutetime">60</span> 
seconds!</div>
<div><span id="workouts"></span> </div>
</body>

如何重复三次显示此阵列？

2 个答案: