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

create new element from array until array is empty every second

本文关键字：数组 新元素 创建 元素      更新时间：2023-09-26

尝试使用每隔一秒随机选择的数组中的项目创建元素，直到数组为空。我很困惑为什么当我不将元素附加到 dom 时我的函数会起作用，但是一旦我添加到 dom，数组就会变大并最终导致 dom 崩溃。

我的计划是最终创建一个具有图像的新对象，具有随机 xy 位置的 css，然后使用对象值将一个新元素附加到 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，它最终会崩溃并且循环永远持续下去，这对我来说毫无意义。

好吧，您正在设置一个间隔，它会在数组为空后很长时间内不断调用自己以检查是否每秒检查一次，即使这不是问题，我建议您执行以下操作：

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

相关文章：