在循环中只声明一个变量的最快方法是什么？

Question

我有一个功能，它是由setInterval();

循环我不想声明全局变量，有啥声明它们在循环中的最快方法，但只有一次。

这就是我正在努力。全局变量叫我:(哎呀

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

必须有一个简单的方法就像var i = 0 || undefined我不想写一个完整的if语句。

谢谢！

Answer 1

一个很好的方法，以避免全局变量是定义IIFE - 立即INV oke函数表达式。

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

这里您有完全相同的代码，但变量不在全局范围内，但在该函数范围下。

Answer 2

一个JavaScript通用的解决方案，以避免全局变量是由匿名函数来包围你的库代码

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

var drawer = setInterval(createInnerBlock,10); 

Answer 3

您想在执行上下文之间保留一个变量。你可以将它作为外部词法环境的一部分（一个闭包或一个全局变量）或重新考虑你的程序的流程。

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

})(); 

或者你可以通过使用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); 

你可能不能够停止循环，不封闭或全球可变的。