从数组创建新元素，直到数组每秒都为空(create new element from array until array is empty every second)

从数组创建新元素，直到数组每秒都为空(create new element from array until array is empty every second)

尝试使用每隔一秒随机选择的数组中的项创建元素，直到数组为空。 我难以理解为什么我的函数在我没有将元素附加到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中它最终会崩溃并且循环继续进行，这对我来说毫无意义。

Trying to create an element using items from an array that are randomly selected every other second until array is empty. I am stumped why my function works when i don't append the element to the dom but as soon as i add to the dom the array just gets larger and ends up crashing the dom.

My plan is to eventually create a new object that has the image, css with random xy position and then append a new element to the dom using the object values.

Basically i am trying to add random images to the dom every second and have them animate in and out until the array is empty.

Any help would be greatly appreciated, thank you.

"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); },

This is the console when i don't append new image:

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

If i add the new image to the dom it will eventually crash and the loop goes on forever which makes no sense to me.

最满意答案

好吧，你正在设置一个间隔，它将继续调用自己检查数组是否为空后每隔一秒，即使这不是问题我建议你做这样的事情：

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'函数可能被多次调用，使用相同的数组设置了很多间隔。 如果循环真的是无限的，那么它可能会以某种方式调用自身。 尝试在加载功能上只保留控制台日志并运行脚本以查看日志是否多次出现。

Well, you are setting an interval, it will keep calling itself to check the if every second long after the array is empty, even if thats not the issue I recommend you to do something like this:

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

This way, the function will call itself and return one result every second until the array is empty.

Now going to the real problem: Your 'load' function is probably being called multiple times, setting a lot of intervals with the same array. If the loop is really infinite then it might be calling itself somehow. Try leaving just a console log on your load function and run your script to see if the log appears multiple times.