CODEWITHSUNDEEP
javascriptloops
Manu Masson
Manu Masson

Reputation: 1747

What's the fastest way to only declare a variable once in a loop?

I have a function and it is looped by setInterval();

I don't want to declare global variables, so what's the fastest way to declare them inside a loop but only once.

This is what i'm working on. Global variables called i :( grrr

var i = 0, //If I declare this in the function my code wont work because I is always 0.
i2 = 0;
var createInnerBlock = function(){
    var block = document.createElement("DIV"),
    x = block.style,
    w = window.innerWidth;
    x.height = "150px"
    x.width = "150px"
    x.backgroundColor = "#FA6900"
    x.borderRadius = "15%"
    x.left = 5+ i;
    x.top = 5 + i2;
    i+=160;
    x.position = "absolute"
    document.body.appendChild(block)
    if(i>=w){
        i2+=160;
        i=0;
    if(i2>=window.innerHeight){
        clearInterval(drawer);
    }
    }
}
var drawer = setInterval(createInnerBlock,10);

There must be an easy way like var i = 0 || undefined I don't want to write a whole if statement.

Thanks!

Upvotes: 0

Views: 104

Answers (3)

MinusFour
MinusFour

Reputation: 14423

You want to persist a variable between execution contexts. You either make it part of the outer lexical environment (a closure or a global variable) or rethink the flow of your program.

An IIFE:

(function(){

var i = 0, //If I declare this in the function my code wont work because I is always 0.
i2 = 0;
var createInnerBlock = function(){
    var block = document.createElement("DIV"),
    x = block.style,
    w = window.innerWidth;
    x.height = "150px"
    x.width = "150px"
    x.backgroundColor = "#FA6900"
    x.borderRadius = "15%"
    x.left = 5+ i;
    x.top = 5 + i2;
    i+=160;
    x.position = "absolute"
    document.body.appendChild(block)
    if(i>=w){
        i2+=160;
        i=0;
    if(i2>=window.innerHeight){
        clearInterval(drawer);
    }
    }
}
var drawer = setInterval(createInnerBlock,10);

})();

Or you could pass it as a parameter to the function by using setTimeout:

var createInnerBlock = function(i) {
    var block = document.createElement("DIV"),
    x = block.style,
    w = window.innerWidth;
    x.height = "150px"
    x.width = "150px"
    x.backgroundColor = "#FA6900"
    x.borderRadius = "15%"
    x.left = 5+ i;
    x.top = 5 + i2;
    i+=160;
    x.position = "absolute"
    document.body.appendChild(block)
    if(i>=w){
        i2+=160;
        i=0;
    if(i2>=window.innerHeight){
        clearInterval(drawer);
    }
    }
    setTimeout(function() {
      createInnerBlock(i);
     }, 10);
}
setTimeout(function(){
   createInnerBlock(0); 
},10);

You might not be able to stop the loop without a closure or global variable though.

Upvotes: 1

Saar
Saar

Reputation: 2306

a good approach to avoid global variables is to define IIFE - Immediately Invoke Function Expressions.

(function(){

     var i = 0, //If I declare this in the function my code wont work because I is always 0.
    i2 = 0;
    var createInnerBlock = function(){
        var block = document.createElement("DIV"),
        x = block.style,
        w = window.innerWidth;
        x.height = "150px"
        x.width = "150px"
        x.backgroundColor = "#FA6900"
        x.borderRadius = "15%"
        x.left = 5+ i;
        x.top = 5 + i2;
        i+=160;
        x.position = "absolute"
        document.body.appendChild(block)
        if(i>=w){
            i2+=160;
            i=0;
        if(i2>=window.innerHeight){
            clearInterval(drawer);
        }
        }
    }
    var drawer = setInterval(createInnerBlock,10);
}());

here you have the exact same code but the variables are not on the global scope but under that function scope.

Upvotes: 3

nlips
nlips

Reputation: 1288

A javascript generic solution to avoid global variable is to surround your library code by an anonymous function.

var createInnerBlock = function() {
    var i = 0
    i2 = 0;
    return = function(){
        ...
    };
}();

var drawer = setInterval(createInnerBlock,10);

Upvotes: 1

Related Questions