Question

我需要一个接一个地在网页的DIV中显示多个图像。两个图像之间应该有一个时间间隔。这是我为此尝试的代码。

$('#abc').prepend('<img id="theImg" src="D:/Image_Store/Character/Animal/Pet/cat2.png" />')
    wait(1000);
    $('#abc').prepend('<img id="theImg" src="D:/Image_Store/Character/Animal/Pet/dog1.png" />')
    wait(1000);
    $('#abc').prepend('<img id="theImg" src="D:/Image_Store/Character/Animal/Pet/dog2.png" />')
    wait(1000);
    $('#abc').prepend('<img id="theImg" src="D:/Image_Store/Character/Animal/Pet/parrot1.png" />')
    wait(1000);

修改

等待功能在这里

function wait(ms){
       var start = new Date().getTime();
       var end = start;
       while(end < start + ms) {
         end = new Date().getTime();
      }
    }

但这不起作用，只显示最后一张图片。我怎么能弄明白呢？

Answer 1

您不能在浏览器中的行之间暂停执行JavaScript代码。（不是一种有用的方式; alert和类似的做法。）或者至少，如果你这样做，浏览器的整个UI（或至少那个标签）会锁定并且不会呈现页面更新。 / p>

相反，请安排一系列定时回调来更新您的图片：

[   "D:/Image_Store/Character/Animal/Pet/cat2.png",
    "D:/Image_Store/Character/Animal/Pet/dog1.png",
    "D:/Image_Store/Character/Animal/Pet/dog2.png",
    "D:/Image_Store/Character/Animal/Pet/parrot1.png"
].forEach(function(img, index) {
    setTimeout(function() {
        $("<img>").attr("src", img).prependTo("#abc");
    }, 1000 * index);
});

我们安排了0ms后的第一次更新，1000ms后的第二次更新，2000ms后的第三次更新等。

附注：您的原始代码正在添加具有相同img值的多个 id元素。上面的代码仍然使用多个img元素，但没有给它们id，因为在多个元素上使用相同的id是无效的。

如果您的目标是使用多个来源更新的单个 img元素，我们会做的略有不同：

[   "D:/Image_Store/Character/Animal/Pet/cat2.png",
    "D:/Image_Store/Character/Animal/Pet/dog1.png",
    "D:/Image_Store/Character/Animal/Pet/dog2.png",
    "D:/Image_Store/Character/Animal/Pet/parrot1.png"
].forEach(function(img, index) {
    if (index === 0) {
        // Create and append the img
        $("<img>").attr("id", "theImg").attr("src", img).prependTo("#abc");
    } else {
        // Update it
        setTimeout(function() {
            $("#theImg").attr("src", img);
        }, 1000 * index);
    }
});

javascript asynchonously更新div

1 个答案: