What is the best way to iterate through a function continuously?

Question

What is the best way to iterate through a function continuously?

I am trying to implement a function 'y()' that I want to run on a delayed loop.

Currently, I have been using "setInterval" to execute the function every 2 seconds. The setInterval functionality is triggered by calling the function 'z1()' through a button click. However, this approach doesn't seem to be effective.

Below is the code snippet:

Javascript:

var x = 0-1;     
var i;

function z1() {
    setInterval(
        function y() { 
            function number_string() {
                x += 1;
                document.getElementById("display").innerHTML = x;
                var number = 1234567890123456789;
                var one = String(number).charAt(x);
                var one_as_number = Number(one); 
                
                document.getElementById("display2").innerHTML = one_as_number;
            }
        },2000
    );
}

HTML:

<button onclick="z1()">x</button>

javascript loops setinterval

Answer 1

Answer №1

Check out this jsBin demo

If you want to optimize your code, consider removing the inner function function number_string() { since it is not being called anywhere in the code. It might also be beneficial to cache elements that will be reused multiple times.

var x = -1; 
var disp1 = document.getElementById("display");
var disp2 = document.getElementById("display2");

function z1() {
  setInterval(function y() { 
    disp1.innerHTML = ++x;
    var number = 1234567890123456789;
    disp2.innerHTML = String(number).charAt(x);
  },2000);
}

The use of

var number = 1234567890123456789;

seems questionable, but if it works for you, then go with it!

Lastly, using both Number() and innerHTML may not be necessary as there is no significant difference even if the value is a string.

Answer 2

Check out this jsBin demo

If you want to optimize your code, consider removing the inner function function number_string() { since it is not being called anywhere in the code. It might also be beneficial to cache elements that will be reused multiple times.

var x = -1; 
var disp1 = document.getElementById("display");
var disp2 = document.getElementById("display2");

function z1() {
  setInterval(function y() { 
    disp1.innerHTML = ++x;
    var number = 1234567890123456789;
    disp2.innerHTML = String(number).charAt(x);
  },2000);
}

The use of

var number = 1234567890123456789;

seems questionable, but if it works for you, then go with it!

Lastly, using both Number() and innerHTML may not be necessary as there is no significant difference even if the value is a string.

Answer 3

Answer №2

Observing closely, when you call y, it returns a function called number_string. You have the option to eliminate it

    function y() { 

            x += 1;
            document.getElementById("display").innerHTML = x;
            var number = 1234567890123456789;
            var one = String(number).charAt(x);
            var one_as_number = Number(one); 
            //document.write(one_as_number);
            document.getElementById("display2").innerHTML = one_as_number;

    }, 2000

or simply invoke it directly...

    function y() { 
        function number_string() {
            x += 1;
            document.getElementById("display").innerHTML = x;
            var number = 1234567890123456789;
            var one = String(number).charAt(x);
            var one_as_number = Number(one); 
            //document.write(one_as_number);
            document.getElementById("display2").innerHTML = one_as_number;
        } ()    // <-- see
    }, 2000

Answer 4

Observing closely, when you call y, it returns a function called number_string. You have the option to eliminate it

    function y() { 

            x += 1;
            document.getElementById("display").innerHTML = x;
            var number = 1234567890123456789;
            var one = String(number).charAt(x);
            var one_as_number = Number(one); 
            //document.write(one_as_number);
            document.getElementById("display2").innerHTML = one_as_number;

    }, 2000

or simply invoke it directly...

    function y() { 
        function number_string() {
            x += 1;
            document.getElementById("display").innerHTML = x;
            var number = 1234567890123456789;
            var one = String(number).charAt(x);
            var one_as_number = Number(one); 
            //document.write(one_as_number);
            document.getElementById("display2").innerHTML = one_as_number;
        } ()    // <-- see
    }, 2000

Answer 5

Answer №3

In order to call y() from outside the setInterval, it must be defined externally. Otherwise, the function name's scope will only be limited to the z1 function.

The original code for y() included an internal function named number_string(), but it was never invoked. It would be more efficient to incorporate that code directly into the body of y().

var x = -1;     
var i;
function y() { 
    x += 1;
    document.getElementById("display").innerHTML = x;
    var number = 1234567890123456789;
    var one = String(number).charAt(x);
    var one_as_number = Number(one); 
    //document.write(one_as_number);
    document.getElementById("display2").innerHTML = one_as_number;
}

//document.getElementById("function1").innerHTML = "y()";
function z1() {
    setInterval(y,2000);
}

Answer 6

In order to call y() from outside the setInterval, it must be defined externally. Otherwise, the function name's scope will only be limited to the z1 function.

The original code for y() included an internal function named number_string(), but it was never invoked. It would be more efficient to incorporate that code directly into the body of y().

var x = -1;     
var i;
function y() { 
    x += 1;
    document.getElementById("display").innerHTML = x;
    var number = 1234567890123456789;
    var one = String(number).charAt(x);
    var one_as_number = Number(one); 
    //document.write(one_as_number);
    document.getElementById("display2").innerHTML = one_as_number;
}

//document.getElementById("function1").innerHTML = "y()";
function z1() {
    setInterval(y,2000);
}

What is the best way to iterate through a function continuously?

Answer №1

Answer №2

Answer №3

Similar questions

Steps to verify multiple v-for loops and apply style if both are present

How to Retrieve the Access Token from Instagram using Angular 2/4/5 API

Refine your search by focusing on select characteristics of an item

Managing "unprocessed information" in a Node.js environment and transferring the information through a Node Express endpoint

The challenge of synchronizing Javascript and PHP code

Exploring the World of Subclassing Arrays in JavaScript: Uncovering the TypeError of Array.prototype.toString's

"Troubleshooting the issue of Angular not functioning with Coffeescript

Error: $result has not been defined in this context

node.js is reporting that it cannot locate some of the modules

Ways to halt a CSS animation when it reaches the screen boundary

Unable to trigger submission in jQuery validate function after validation check

How to Activate ng-animate in AngularJS When Data Binding Value Changes

What is the best method for removing extra spaces from an input field with type "text"?

I am struggling to understand why clicking this button is not successfully submitting the form to Google Sheets

javascriptcode to execute before loading google maps

Deleting an element from HTML using jQuery

Execute consecutive Angular2 functions in a sequential manner, one following the next

Comparing multiple char arrays in C++

Disable toolbar focus in TinyMCE

Angular JS: How to dynamically add and remove checkboxes in ng-repeat?