removeChild 函数不适用于 setTimeout 函数

Question

我正在尝试构建一个将按顺序显示一系列图像的动画，但是运行我遇到了 removeChild 命令的问题，似乎无法弄清楚如何停止显示之前的图像下一个出现。我不能使用 jQuery，因为此代码将与没有 jQuery 的 Qualtrics 交互。下面的代码，您还可以访问它的 JSFiddle here。我绝对是初学者，非常感谢任何帮助！

 ////Animate\\\


var imageLinks = ["http://i.imgur.com/iUjHm4e.jpg",
    "http://i.imgur.com/89Bh81C.jpg",
    "http://i.imgur.com/qKecE0F.jpg",
    "http://i.imgur.com/s5LzrE1.jpg",
    "http://i.imgur.com/thRmkE8.jpg",
    "http://i.imgur.com/mjfqeKv.jpg",
    "http://i.imgur.com/w9EpXNq.jpg",
    "http://i.imgur.com/b2rP5RQ.jpg",
    "http://i.imgur.com/NDLm5QQ.jpg",
    "http://i.imgur.com/7nohNKf.jpg",
    "http://i.imgur.com/4Qtz8KB.jpg",
    "http://i.imgur.com/xTwSsBe.jpg",
    "http://i.imgur.com/KwXNQjR.jpg",
    "http://i.imgur.com/5BVvvci.jpg",
    "http://i.imgur.com/bU0jnnD.jpg",
    "http://i.imgur.com/YKy6K6u.jpg",

];

function display(src) {
    var img = document.createElement("img");
    img.src = src;
    document.body.appendChild(img);
}

function remove(img) {
    document.body.removeChild(img);
}



i = 0;

function animation_loop() {
    im = display(imageLinks[i]);
    setTimeout(function () {
        i++;
        if (i < imageLinks.length) {
            animation_loop();
        }
    }, 50);
    remove(imageLinks[i]);
};


animation_loop();

Answer 1

您将字符串从 imageLinks 传递给 remove 方法

您需要存储在 display() 中创建的图像并将其删除。你几乎已经完成了）这是工作代码：

function animation_loop() {
    im = display(imageLinks[i]);
    setTimeout(function () {
        i++;
        if (i < imageLinks.length) {
            animation_loop();
        }
    }, 50);
    remove(im);
};

Answer 2

试试这个：

                    var imageLinks=["http://i.imgur.com/iUjHm4e.jpg",
                    "http://i.imgur.com/89Bh81C.jpg",
                    "http://i.imgur.com/qKecE0F.jpg",
                    "http://i.imgur.com/s5LzrE1.jpg",
                    "http://i.imgur.com/thRmkE8.jpg",
                    "http://i.imgur.com/mjfqeKv.jpg",
                    "http://i.imgur.com/w9EpXNq.jpg",
                    "http://i.imgur.com/b2rP5RQ.jpg",
                    "http://i.imgur.com/NDLm5QQ.jpg",
                    "http://i.imgur.com/7nohNKf.jpg",
                    "http://i.imgur.com/4Qtz8KB.jpg",
                    "http://i.imgur.com/xTwSsBe.jpg",
                    "http://i.imgur.com/KwXNQjR.jpg",
                    "http://i.imgur.com/5BVvvci.jpg",
                    "http://i.imgur.com/bU0jnnD.jpg",
                    "http://i.imgur.com/YKy6K6u.jpg",
            ];
            function display(src)
            {
                    var img=document.createElement("img");
                    img.src=src;
                    document.body.appendChild(img);
                    return img;
            }
            function remove(img)
            {
                    document.body.removeChild(img);
            }
            var i=0;
            function animation_loop()
            {
                    var img=display(imageLinks[i]);
                    setTimeout(function()
                    {
                            i++;
                            if(i < imageLinks.length)
                            {
                                    animation_loop();
                                    remove(img);
                            }
                    }, 5000);
            }
            animation_loop();

您需要 return DOM 在 Display 函数中创建对象后才能在 remove 方法中使用。我在重新执行 animation_loop-self 函数后执行了 remove 方法以了解执行流程..

removeChild 函数不适用于 setTimeout 函数

removeChild Function Not Working with setTimeout function

javascript

settimeout

removechild