Question

我有一个函数，它由setInterval();

循环

我不想声明全局变量，所以在循环中声明它们的最快方法是什么，但只能。

这就是我正在努力的方向。全局变量称为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);

必须有一种简单的方式，例如var i = 0 || undefined我不想写一个完整的if语句。

谢谢！

Answer 1

避免全局变量的一个好方法是定义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);
}());

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

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

但是，如果没有闭包或全局变量，您可能无法停止循环。

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

3 个答案: