Question

我遇到了让removeChild（）工作的问题。我得到＆＃34; NotFoundError：找不到节点image_div.parentNode.removeChild（img）;＆＃34;错误

这是我的代码：

<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

在循环中使用setTimeout会在将正确的img传递给参数函数时使事情变得复杂。您也可能在数组中的图像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 */}());

找不到NotFoundError节点image_div.parentNode.removeChild（img）

1 个答案: