Javascript: Pass number variable from a function to 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/

so you want to delete first array, wait 30 milliseconds, delete the second, wait 45, and so on? — juvian
– juvian, Commented Jan 25, 2016 at 20:10
so when that first "crunches" is displayed it would display for 30 ms, and the second "crunches" would be displayed for 45ms - and so on through the rest of the array. — mattbtay
– mattbtay, Commented Jan 25, 2016 at 20:20

jfriend00 · Accepted Answer · 2016-01-25 20:18:11Z

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

juvian · Accepted Answer · 2016-01-25 20:32:27Z

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>

Collectives™ on Stack Overflow

Javascript: Pass number variable from a function to setInterval

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related