如何解决添加到图片库图像列表中的元素的过多递归误差

Question

下面有下面的代码，用于监视库加载图像的时间(这是通过JavaScript完成的)。然后计算加载的图像总量，然后减去已经可见的图像数量(使用CSS，我们隐藏所有图像，然后只显示前4个图像)。在第四个可见图像上，我们想用文本“查看更多”来显示剩余的图像(隐藏图像的数量)。例如，总共有34张图像，只有4张可见，30张隐藏在第4张可见图像上，我们显示"30查看更多“

// When gallery div is loaded/inserted 
jQuery('.mapsvg-controller-view').on('DOMNodeInserted','.mapsvg-gallery-wrap', function() {  
        
            var galleryFigureNum = 0;
            var moreImagesNum = 0;
    
            // Count the total number of figure elements (images) 
            jQuery('.mapsvg-gallery > figure').each(function(){
                galleryFigureNum++;
            });
            
            // Subtract the amount of already visible images from the total available
            moreImagesNum = galleryFigureNum - 4;
    
            // Add more available images number and text to 4th figure
            jQuery('.mapsvg-gallery').children().eq(3).append('<div>'+moreImagesNum+'More Position 4</div>');
    });

我遇到的问题是，我得到了以下错误：

Uncaught :太多的递归

由这条生产线生产的产品：

jQuery('.mapsvg-gallery').children().eq(3).append('<div>'+moreImagesNum+'More Position 4</div>');

这导致多次插入<div> (239+)。

如何解决太多的递归错误？我只想添加一次<div>。

注意：使用，在后面附加或，产生相同的错误。

Answer 1

jQuery('.mapsvg-gallery').children().eq(3).append('<div>'+moreImagesNum+'More Position 4</div>');
});

这一行是在侦听的div中添加一个元素，该元素重新触发DOMNodeInserted事件，重新添加“更多”div，重新触发DOMNodeInserted.

您需要将您的“更多”消息移出您正在收听的div之外，或者更有可能完全不听DOMNodeInserted --您知道什么时候加载了您的图像，以及理想情况下它们有多少。