NotFoundError 节点未找到 image_div.parentNode.removeChild(img)

Question

我在使 removeChild() 工作时遇到问题。我收到“NotFoundError：找不到节点 image_div.parentNode.removeChild(img);”错误

这是我的代码：

<div id="imagesframe"> </div>

<script>
images_array = [image1.jpg,image2.jpg,image3.jpg,image4.jpg,image5.jpg];
var image_div = document.getElementById('imagesframe');
for(var i=0 ; i<images_array.length ; i++) {
    var img = new Image();
    img.src = images_array[i];
    img.style.width = '500px';
    img.style.height = '500px';
    setTimeout(function(){image_div.appendChild(img)},1000);
    image_div.parentNode.removeChild(img);
}
</script>

最后一行： image_div.parentNode.removeChild(img); 导致问题。

这可能是什么原因造成的？

Answer 1

在将正确的img 传递给参数函数时，在循环中使用setTimeout 会使事情变得复杂。此外，您可能已经省略了数组中图像 URL 周围的引号。

然后是setTimeout，它不会阻止循环被执行，它只是一个计时器，它在给定的延迟后启动参数函数。在您的代码中（没有其他错误），所有五个函数调用将在一秒钟后几乎同时完成，因为循环会在微秒内为每一轮创建一个新计时器。

这是一种使用简单外部范围访问的替代方法。

window.onload = function () {
    var imagesArray = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg'], // URLs of the images
        imageDiv = document.getElementById('imagesframe'), // An element wherein to show the images
        counter = 0, // Image counter
        img;  // A temporary image element

    // Changes images in an element
    function changeImg (first) {
        if (!first) { // Check, if there's an image to remove
            imageDiv.removeChild(img); // Remove an image
        } else { // Reset counter, just in case the slideshow will be reused
            counter = 0;
        }
        // Create a new image and append it to an element
        img = new Image();
        img.src = imagesArray[counter];
        img.style.width = '500px';
        img.style.height = '500px';
        imageDiv.appendChild(img);
        // Show more images or quit
        counter += 1;
        if (counter < 5) { // Show the next image
            setTimeout(changeImg, 1000);
        } else { // Remove the last image
            setTimeout(function () {imageDiv.removeChild(img)}, 1000);
        }
    }
    changeImg(true); // Show the first image
    return;
};

代码放置在head 中，并包含在window.onload 中。如果需要，您可以将其包装在 IIFE 中，并将其放在代码中的原始位置。需要一个包装器来避免声明全局变量。

IIFE = 立即调用函数表达式，看起来有点像这样：

(function () {/* Code to run here */}());