如何循环到setInterval？ （带数组） - javascript

Question

在我的代码中，我试图在Matter.js插件的帮助下一次绘制一个矩形。我想要的效果就是：http://gyazo.com/0b84f082c4518c7c42a1651173e7b961 我从数据库中得到了应该绘制多少个矩形（在变量entradas[]中）。但是我在阵列中有很多位置，其中一个位置应该绘制多少个矩形。使用计时器“desenha”，我将一个矩形画一个，直到entradas []。

我的问题是我无法制作循环，当它从第一行绘制所有矩形时，它从第二行绘制下一个矩形，依此类推。现在它只绘制矩形第一行。

这是我尝试执行此操作的代码的一部分：

var li=1;
desenha=setInterval(
     function() {

           if(categoria[li]){
             entra=entradas[li];
             tex=texturas[li];
           }

           if(rects<entradas[li]){
                World.add(_world,
                    Bodies.rectangle( Math.round(Common.random(300,400)),-20,Math.round(Common.random(20,30)),Math.round(Common.random(20,30)), {
                        render: {
                         strokeStyle: '#ffffff',
                         sprite: {
                            texture: tex
                         }
                        }
                    })

            );  
            }
          }
            , 500);

contagem=setInterval( function(){
        if(rects<entradas[li]){
            rects=rects+1;

            document.getElementById("mytext").value = rects;
            rectsmoney=rects*valor[1];
            document.getElementById("mytext2").value = Math.round(rectsmoney);

       } 
       },500);

if(rects>=entradas[li]){
    rects=0;
    li++;
}

在回声的帮助下，我知道它将每行打印到entradas [];

任何人都可以帮我制作这个循环吗？

Answer 1

包装setInterval函数并为它们提供临时范围。 由于desenha是一个全局变量，它将在循环时重新分配desenha。更好的方法是保持全局数组以存储间隔。

(function(li) { desenha[li] =setInterval(
     function() {

           if(categoria[li]){
             entra=entradas[li];
             tex=texturas[li];
           }

           if(rects<entradas[li]){
                World.add(_world,
                    Bodies.rectangle( Math.round(Common.random(300,400)),-20,Math.round(Common.random(20,30)),Math.round(Common.random(20,30)), {
                        render: {
                         strokeStyle: '#ffffff',
                         sprite: {
                            texture: tex
                         }
                        }
                    })

            );  
            }
          }
            , 500);
         })(li);