Iterating over an array while postponing a function

Question

Iterating over an array while postponing a function

My goal is to create a continuous loop through an array of number values. These values will be used as delay parameters in a setInterval function, triggering another function each time. Here's what I've come up with:

HTML:

<p>On</p>

JavaScript:

$(document).ready(function(){
    var timings = [5000, 10000, 17000, 8000, 14000, 9000, 12000, 8000, 20000, 7000, 13000, 7000, 17000, 8000, 13000, 12000, 18000]
    //function to modify
    function modify(){
            var p = $("p").html();
            if(p === "On"){
                $("p").html("Off"); 
            } else {
                $("p").html("On");
            }
        }


    function myNewFunction(){
        for (var i = 0; i < timings.length; i++){
            var switchTime = timings[i];

            setInterval(function(){
                modify(); 

            },switchTime);

        }
    } myNewFunction();

});

I aim to have the modify function execute continuously at varying intervals. However, when I run this code, the timing doesn't seem to be functioning correctly. Any insights or suggestions would be greatly welcomed. Thank you!

javascript arrays settimeout setinterval timedelay

Answer 1

Answer №1

When it comes down to it, relying on a loop won't cut it, as a multitude of setInterval (or setTimeout()) functions are initiated almost simultaneously in mere microseconds.
Each one carries out its task according to its designated timing[i], but all within a very close timeframe!

On the contrary, the key is to trigger each step only after the preceding one concludes.

Take a look at this functional example (also viewable on this fiddle), complete with visual progress tracking:

HTML:

<p id="on-off">On</p>
<p id="delay"></p>

Javascript:

$(document).ready(function(){
  var timing = [
    5000, 10000, 17000, 8000, 14000, 9000, 12000, 8000, 20000, 7000, 13000,
    7000, 17000, 8000, 13000, 12000, 18000
  ];
  function myFunction(i){
    i |= 0;
    if (i < timing.length - 1) {
      var switchTime = timing[i]
          $onOff = $('#onOff');
      $('#delay').html('i=' + i + ', delay=' + switchTime);
      $onOff.html($onOff.html() == 'On' ? 'Off' : 'On');
      setTimeout(
        function() {
          myFunction(i + 1);
        }, switchTime
      )
    } else {
      $('#delay').html('end');
    }
  }
  myFunction();
});

Answer 2

When it comes down to it, relying on a loop won't cut it, as a multitude of setInterval (or setTimeout()) functions are initiated almost simultaneously in mere microseconds.
Each one carries out its task according to its designated timing[i], but all within a very close timeframe!

On the contrary, the key is to trigger each step only after the preceding one concludes.

Take a look at this functional example (also viewable on this fiddle), complete with visual progress tracking:

HTML:

<p id="on-off">On</p>
<p id="delay"></p>

Javascript:

$(document).ready(function(){
  var timing = [
    5000, 10000, 17000, 8000, 14000, 9000, 12000, 8000, 20000, 7000, 13000,
    7000, 17000, 8000, 13000, 12000, 18000
  ];
  function myFunction(i){
    i |= 0;
    if (i < timing.length - 1) {
      var switchTime = timing[i]
          $onOff = $('#onOff');
      $('#delay').html('i=' + i + ', delay=' + switchTime);
      $onOff.html($onOff.html() == 'On' ? 'Off' : 'On');
      setTimeout(
        function() {
          myFunction(i + 1);
        }, switchTime
      )
    } else {
      $('#delay').html('end');
    }
  }
  myFunction();
});

Answer 3

Answer №2

To increase the value of the variable i within the setInterval callback function.

function updateCounter(){
    for (var i = 0; i < counts.length; ){
        var timeInterval = counts[i];

        setInterval(function(){
            increment(); 
           i++;
        },timeInterval);

    }
}

Answer 4

To increase the value of the variable i within the setInterval callback function.

function updateCounter(){
    for (var i = 0; i < counts.length; ){
        var timeInterval = counts[i];

        setInterval(function(){
            increment(); 
           i++;
        },timeInterval);

    }
}

Answer 5

Answer №3

When working in a loop, it's best to utilize setTimeout rather than setInterval. This is because setInterval sets up a timer that repeatedly triggers at the set interval (e.g. every 5 seconds, 10 seconds, and so on). On the other hand, using setTimeout within your loop ensures that the timer fires only once per iteration after the specified delay. This allows for a new timer to be set for the subsequent delay value in the next iteration.

Answer 6

When working in a loop, it's best to utilize setTimeout rather than setInterval. This is because setInterval sets up a timer that repeatedly triggers at the set interval (e.g. every 5 seconds, 10 seconds, and so on). On the other hand, using setTimeout within your loop ensures that the timer fires only once per iteration after the specified delay. This allows for a new timer to be set for the subsequent delay value in the next iteration.

Answer 7

Answer №4

If you are experiencing issues with intervals not clearing properly, it may be due to not properly using the clearInterval function. To ensure intervals are cleared before setting new ones, make sure to store the interval ID globally and clear it before setting a new interval. This will help prevent any overlapping intervals and ensure that your code runs as intended.

Set an interval and save the ID globally
When the callback is triggered, use clearInterval to clear the current interval
Repeat this process for each new interval

Answer 8

If you are experiencing issues with intervals not clearing properly, it may be due to not properly using the clearInterval function. To ensure intervals are cleared before setting new ones, make sure to store the interval ID globally and clear it before setting a new interval. This will help prevent any overlapping intervals and ensure that your code runs as intended.

Set an interval and save the ID globally
When the callback is triggered, use clearInterval to clear the current interval
Repeat this process for each new interval

Iterating over an array while postponing a function

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to extract a column as an array from an Excel file using Python

Synchronous AJAX requests do not function properly in IE and Firefox, but they do work in Chrome and Safari

While conducting tests on a Vue single file component, Jest came across an unforeseen token

Guide: Generating a dynamic textbox on click event without needing to reload the page

eliminating various arrays within a two-dimensional array

Typescript: Why Lines Are Not Rendering on Canvas When Using a For-Loop

Utilize Angular2's input type number without the option for decimal values

Exploring the Power of Jasmine Testing with Ternary Conditions

JSON syntax error: "r" is not a valid token at the beginning position

Restrict the number of dynamic form elements to a maximum of 10 entries

Is there a way to use JavaScript to switch the entire div on and off

Unable to associate Slider values with TextFields in MaterialUI

What is the reason for and <br> not functioning in a string?

Troubleshooting issues with AJAX script and JSON formatted data

Using Passport.js with a custom callback function that accepts parameters

What impact does changing the Device Language have on a heading?

When applying the OWASP ESAPI encodeForHTMLAttribute method, I noticed that symbols are being rendered as their corresponding HTML entity numbers instead of the actual symbols

appending a set of parameters to a website address

Methods for passing JavaScript variables to PHP

Is there a way to prevent a bootstrap modal from opening?