每秒从数组中创建新元素，直到数组为空

Question

尝试使用从数组中随机选择的元素创建一个元素，直到数组为空为止。我困惑的是，当我不将元素附加到dom时，我的函数可以工作，但是一旦添加到dom中，数组就会变大并最终崩溃dom。

我的计划是最终创建一个新对象，该对象具有图像、css和随机xy位置，然后使用对象值将新元素附加到dom中。

基本上，我正在尝试每秒向dom添加随机图像，并使它们动画进出，直到数组为空。

非常感谢您的帮助，谢谢。

    "load": function(){
        var imgArray = ['brain', 'mitochondria', 'microscope', 'beaker', 'beaker-2', 'scientist', 'cell', 'atom', 'dropper'];

        window.setInterval(function(){
            var imgItem;
            if( imgArray.length >= 1 ) {
                var index = Math.floor( Math.random()*imgArray.length );
                console.log( imgArray[index] ); // Log the item
                imgItem = ( imgArray[index] ); // Log the item

                imgArray.splice( index, 1 ); // Remove the item from the array
                // $('form').append('<img class="img-animation" src="img/science/'+ imgItem +'.svg" alt="'+ imgItem +'">');
            }
        }, 1000);

    },

这是没有添加新图像时的控制台：

home.js:11 beaker
home.js:11 dropper
home.js:11 microscope
home.js:11 beaker-2
home.js:11 atom
home.js:11 brain
home.js:11 scientist
home.js:11 cell
home.js:11 mitochondria

如果我将新图像添加到dom中，它最终会崩溃，循环将永远继续，这对我来说毫无意义。

- Travis Michael Heller

---

你有没有考虑在每次迭代时记录数组的内容，这样它可能会显示你为什么/在哪里出错了。为了防止无限循环，在if中使用另一个变量，例如：if (imgArray.length && iterationLimit)（例如初始化iterationLimit = 10），这将只允许10次迭代；在两种情况下，0都是假值，因此一旦任何一个数字达到0，if条件将为false，从而停止执行。 - David Thomas

我也很好奇在更新DOM后，这个“load”回调是否会被重新调用。 - Calvin Belden

我正在使用Meteor作为我的框架。 - Travis Michael Heller

我不太明白你的迭代次数限制是怎么实现的。我猜想每个循环迭代应该将限制减一，对吗？根据图片成对出现的情况看来，好像是因为循环中imgItem变量的值增加了，就像它在每个迭代中都翻倍一样。 - Travis Michael Heller

Answer 1

好的，您正在设置一个间隔，它将在数组为空后每秒钟调用自身以检查是否存在问题，即使那不是问题，我建议您像这样做：

var imgArray = ['brain', 'mitochondria', 'microscope', 'beaker', 'beaker-2', 'scientist', 'cell', 'atom', 'dropper'];

var getAllRandomly = function(arr) {
    if (arr.length) {
        var index = Math.floor(Math.random() * arr.length);
        console.log(arr[index]); // Log the item
        imgItem = (arr[index]); // Log the item
        imgArray.splice(index, 1); // Remove the item from the array
        setTimeout(function() {
            getAllRandomly(arr);
        }, 1000);
    }
    else {
        console.log('Array is empty');
    }
};

getAllRandomly(imgArray);

这样，函数将会调用自身并且每秒返回一个结果，直到数组为空。

现在来看真正的问题： 你的“load”函数可能被多次调用，使用相同的数组设置了很多间隔。如果循环确实是无限的，那么可能是某种方式下调用了自身。 尝试只在你的load函数上留下console log并运行你的脚本，看看日志是否出现了多次。

- Aramil Rey

---

这正是我想要实现的，非常感谢！ - Travis Michael Heller