Javascript：将数字变量从函数传递到setInterval

Question

var items = [ 
  ["crunches", 30], 
  ["crunches", 45], 
  ["squats", 30], 
  ["squats", 45], 
  ["lunges", 30],
  ["lunges", 45], 
  ["wall sits", 30],
  ["wall sits", 45], 
  ["push ups", 30],
  ["push ups", 45], 
  ["leg ups", 30],
  ["leg ups", 45], 
  ["jumping jacks", 30],
  ["jumping jacks", 45], 
  ["sumo squat", 30],
  ["sumo squat", 45] 
];

I'm walking through this array, removing an element each time, but i want to take the number value from each item and make that the delay for a setInterval outside of the function. Is this even possible?

Apologies for the poor JS, still learning a bit here.

Demo: https://jsfiddle.net/mattbtay/dcqdf8ng/1/

Answer 1

As I think you know, setInterval() has a constant duration between iterations so if you want a different delay between each iteration, then it makes more sense to use a repeated setTimeout() call each time where the next delay for setTimeout() is specifically set from the previous selection. This will create the equivalent of a recurring timer, but with a varying interval.

Here's a general idea how you could do that. Based on your jsFiddle, it looks like you want to randomly select an item from the array each time so that's how I've shown the implementation. You didn't say what the units were meant to be on the time values. I assumed they were a number of seconds.

function processArray(arr, processItem, done) {
    // make copy of initial array so we don't modify original data
    var data = arr.slice();
    function next() {
        if (data.length) {
            // get random index
            var index = Math.floor(Math.random() * data.length);
            var item = data[index];

            // remove the selected item from the array
            data.splice(index, 1);

            // now process the randomly selected item
            processItem(item[0], item[1]);

            // set timer for next item based on the time in this one
            setTimeout(next, item[1] * 1000);
        } else {
            done();
        }
    }
    next();
}

processArray(items, function(activity, time) {
      $('#activity').html(activity + ' ' + time);
}, function() {
      // this is called when all the activities are done
});

Answer 2

Here is an example of getting a random item from items, show in html, remove it, wait x milliseconds and then start again until no items are left. When none are left, it triggers the .then function from the promise.

 var items = [ ["crunches", 30], ["crunches", 45], ["squats", 30], ["squats", 45], ["lunges", 30], ["lunges", 45], ["wall sits", 30], ["wall sits", 45], ["push ups", 30], ["push ups", 45], ["leg ups", 30], ["leg ups", 45], ["jumping jacks", 30], ["jumping jacks", 45], ["sumo squat", 30], ["sumo squat", 45] ]; function removeItems(processItemRemoved) { return new Promise(function(resolve, reject) { function removeItem() { if (items.length) { // if there are still items to remove var randomIndex = Math.floor(Math.random() * items.length); // pick a random index between 0 and length-1 var item = items[randomIndex] items.splice(randomIndex, 1) // remove from array processItemRemoved(item) // process removed item setTimeout(removeItem, item[1]) // call function again after items[1] milliseconds } else { // if it has finished, run callback function resolve() } } removeItem() }) } removeItems(function(item) { $("#activity").html(item) }).then(function(){ console.log("all items finished") }) 

 #activity { text-align: center; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="jumbotron"> <h1 id="activity"></h1> <button class="btn btn-primary" id="startBtn">Begin</button> </div> </div> </div> </div>