Passing a number variable from a function to setInterval using JavaScript

Question

Passing a number variable from a function to setInterval using JavaScript

const exerciseItems = [ 
  ["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 need help with a JavaScript function that involves iterating through the 'exerciseItems' array, extracting the number value from each item, and using it as the delay for a setInterval outside of the function. Is this feasible?

Your assistance is greatly appreciated as I am still in the process of familiarizing myself with JavaScript.

Check out the demo here: https://jsfiddle.net/mattbtay/dcqdf8ng/1/

javascript arrays

Answer 1

Answer №1

It is important to note that while setInterval() has a fixed duration between iterations, using a repeated setTimeout() call for each iteration allows for a varying delay between them. By setting the delay for the next setTimeout() based on the previous selection, you can achieve a recurring timer with a changing interval.

If we consider your jsFiddle example, where you seem to want to randomly select an item from an array each time, here is a concept of how it can be implemented. The units of time values were not specified, so I assumed they are in seconds.

function handleArray(arr, processElement, finished) {
    var data = arr.slice();
    
    function iterate() {
        if (data.length) {
            var index = Math.floor(Math.random() * data.length);
            var element = data[index];
            
            data.splice(index, 1);
            
            processElement(element[0], element[1]);
            
            setTimeout(iterate, element[1] * 1000);
        } else {
            finished();
        }
    }
    
    iterate();
}

handleArray(items, function(task, duration) {
      $('#task').html(task + ' takes ' + duration + ' seconds');
}, function() {
      // Executed when all tasks are completed
});

Answer 2

It is important to note that while setInterval() has a fixed duration between iterations, using a repeated setTimeout() call for each iteration allows for a varying delay between them. By setting the delay for the next setTimeout() based on the previous selection, you can achieve a recurring timer with a changing interval.

If we consider your jsFiddle example, where you seem to want to randomly select an item from an array each time, here is a concept of how it can be implemented. The units of time values were not specified, so I assumed they are in seconds.

function handleArray(arr, processElement, finished) {
    var data = arr.slice();
    
    function iterate() {
        if (data.length) {
            var index = Math.floor(Math.random() * data.length);
            var element = data[index];
            
            data.splice(index, 1);
            
            processElement(element[0], element[1]);
            
            setTimeout(iterate, element[1] * 1000);
        } else {
            finished();
        }
    }
    
    iterate();
}

handleArray(items, function(task, duration) {
      $('#task').html(task + ' takes ' + duration + ' seconds');
}, function() {
      // Executed when all tasks are completed
});

Answer 3

Answer №2

Illustrating a process of randomly selecting and removing items from a list in HTML, waiting for a specified time period, and repeating the process until all items have been removed. Upon completion, the .then function from the promise is triggered.

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) { // checking if there are items left to remove

        var randomIndex = Math.floor(Math.random() * items.length); // selecting a random index within the range
        var item = items[randomIndex]

        items.splice(randomIndex, 1) // removing item from the array

        processItemRemoved(item) // processing the removed item

        setTimeout(removeItem, item[1]) // calling the function again after waiting for 'item[1]' milliseconds
      } else { // when all items are removed, triggering the resolve method
        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>

Answer 4

Illustrating a process of randomly selecting and removing items from a list in HTML, waiting for a specified time period, and repeating the process until all items have been removed. Upon completion, the .then function from the promise is triggered.

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) { // checking if there are items left to remove

        var randomIndex = Math.floor(Math.random() * items.length); // selecting a random index within the range
        var item = items[randomIndex]

        items.splice(randomIndex, 1) // removing item from the array

        processItemRemoved(item) // processing the removed item

        setTimeout(removeItem, item[1]) // calling the function again after waiting for 'item[1]' milliseconds
      } else { // when all items are removed, triggering the resolve method
        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>

Passing a number variable from a function to setInterval using JavaScript

Answer №1

Answer №2

Similar questions

The toggleClass() function is only toggling between a single class

Learn how to successfully place a draggable object into a sortable container while ensuring that the dropped item is a personalized helper element rather than the original object

Is there a way to streamline this function that checks for a sequence?

Tips for updating multiple documents in a MongoDB database using an array of values

A guide on how to replicate an array multiple times to suit your requirements

Interested in halting the code execution once a match is found?

Switch up the header's date format on NGX-Print

Display the tooltip and highlight a specific pie slice when clicking on the legend of a pie chart in HighCharts

What is the best way to dynamically add a class to the right navigation element in Vue.js when the :class binding only accepts boolean values?

Prevent clicking with the mouse in a specific area of the screen

What is the process of selecting a hyperlink?

React is set to re-render an array even when the key of an item has remained

What is the process of converting a torch tensor into a collection of numpy arrays in Pytorch?

There seems to be an error with the return from the `mapDispatchToProps` function in `

Is there a way to determine if an integer can be expressed as a linear combination of numbers within an array?

Navigating up and down effortlessly using bootstrap

How can I initiate a button click event in aspx by pressing the "Enter" key on a textbox, with the button click event being defined in the source cs file?

Node.js array push operation malfunctioning

Is it possible to have separate click functions for the onclick attribute and jQuery click handler on an anchor tag, instead of just calling one function through onclick?

A tutorial on dynamically adding fields with a dropdown list (populated from a database) and a text box using PHP and JQuery