Javascript jQuery:2个img src之间的无限循环交替

我正在尝试创建一个简单的GIF动画与两个图像。我想使用相同的img标记并更改循环上的2个src链接

以下是我到目前为止所拥有的，但我不确定如何修复它：

HTML

简化CSS

body {
  background: black;
}

.logo {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0; margin: auto;
    width: 70%;
}

---

要将我的上述评论转化为代码，修复方法如下：

$(document).ready(function() {
    // Every 400 ms
    setInterval(function(){
        // Immediate
        $('.logo').attr("src", "https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws2.svg");

        // In 200 ms
        setTimeout(function(){
          $('.logo').attr("src", "https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg");
        }, 200);
    }, 400);
});

$(document).ready(function() {
    var timer = 200
    setTimeout(function f(i){
        $('.logo').attr("src", "https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws" + ((i%2)+1) + ".svg");
        setTimeout(f, timer, i+1);
    }, timer, 1);
});

您只希望通过

setTimeout

延迟一个，而不是同时延迟两个

---

也就是说，由于这是一个切换，我可能会这样做：

$(document).ready(function() {
    // Every 400 ms
    setInterval(function(){
        // Immediate
        $('.logo').attr("src", "https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws2.svg");

        // In 200 ms
        setTimeout(function(){
          $('.logo').attr("src", "https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg");
        }, 200);
    }, 400);
});

$(document).ready(function() {
    var timer = 200
    setTimeout(function f(i){
        $('.logo').attr("src", "https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws" + ((i%2)+1) + ".svg");
        setTimeout(f, timer, i+1);
    }, timer, 1);
});

---

当然jQuery是不必要的：

document.addEventListener（“DOMContentLoaded”，function（））{
var定时器=200
var logo=document.querySelector（“.logo”）
设置超时（函数f（i）{
logo.src=”https://dummyimage.com/240x180/0000fc/c4c4c4.gif&text=“+（（i%2）+1）；
设置超时（f，定时器，i+1）；
}，计时器，1）；
});
要将我上面的评论转换成代码，修复方法如下：

$(document).ready(function() {
    // Every 400 ms
    setInterval(function(){
        // Immediate
        $('.logo').attr("src", "https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws2.svg");

        // In 200 ms
        setTimeout(function(){
          $('.logo').attr("src", "https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg");
        }, 200);
    }, 400);
});

$(document).ready(function() {
    var timer = 200
    setTimeout(function f(i){
        $('.logo').attr("src", "https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws" + ((i%2)+1) + ".svg");
        setTimeout(f, timer, i+1);
    }, timer, 1);
});

您只希望通过
setTimeout
延迟一个，而不是同时延迟两个


也就是说，由于这是一个切换，我可能会这样做：

$(document).ready(function() {
    // Every 400 ms
    setInterval(function(){
        // Immediate
        $('.logo').attr("src", "https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws2.svg");

        // In 200 ms
        setTimeout(function(){
          $('.logo').attr("src", "https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg");
        }, 200);
    }, 400);
});

$(document).ready(function() {
    var timer = 200
    setTimeout(function f(i){
        $('.logo').attr("src", "https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws" + ((i%2)+1) + ".svg");
        setTimeout(f, timer, i+1);
    }, timer, 1);
});


当然jQuery是不必要的：


document.addEventListener（“DOMContentLoaded”，function（））{
var定时器=200
var logo=document.querySelector（“.logo”）
设置超时（函数f（i）{
logo.src=”https://dummyimage.com/240x180/0000fc/c4c4c4.gif&text=“+（（i%2）+1）；
设置超时（f，定时器，i+1）；
}，计时器，1）；
});
我不明白为什么需要
setInterval
和
setTimeout
。这非常有效

根据来自的优秀反馈，我更新了答案，使用逐位操作在1和0之间切换。
我不明白为什么需要
setInterval
和
setTimeout
。这非常有效

根据来自的优秀反馈，我更新了我的答案，使用逐位操作在1和0之间切换。
我想分享一下我自己的方法。以上两条评论都是正确的。本质上，问题在于调用setTimeout时，函数调用是从调用setTimeout时算起的预定间隔毫秒，而不是从上次设置的超时算起的间隔毫秒

现在，只需从
setTimeout
调用中删除一个调用，代码就可以正常工作。但是，下面的代码也适用于您的目的，避免您提到的延迟

$(document).ready(function()
{
  setTimeout(setLogoA, 200);
}

var logo = $(".logo");
function setLogoA()
{
  logo.attr("src", "https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws2.svg");
  setTimeout(setLogoB, 200);
}

function setLogoB()
{
  logo.attr("src", "https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg");
  setTimeout(setLogoA, 200);
}

我想我会分享我自己的方法。以上两条评论都是正确的。本质上，问题在于调用setTimeout时，函数调用是从调用setTimeout时算起的预定间隔毫秒，而不是从上次设置的超时算起的间隔毫秒

现在，只需从
setTimeout
调用中删除一个调用，代码就可以正常工作。但是，下面的代码也适用于您的目的，避免您提到的延迟

$(document).ready(function()
{
  setTimeout(setLogoA, 200);
}

var logo = $(".logo");
function setLogoA()
{
  logo.attr("src", "https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws2.svg");
  setTimeout(setLogoB, 200);
}

function setLogoB()
{
  logo.attr("src", "https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg");
  setTimeout(setLogoA, 200);
}

在
setInterval
中，从第一个
setTimeout
中取出代码，使其立即运行。您已经将它们安排在同一时间执行（大致）。和
$（文档）。ready（函数（…
）与
$（函数）是一样的（…
。两者都不需要。我删除了第一个超时，它可以正常工作，但它在大约10-20秒后启动，然后正常工作。可能资源加载需要时间。不确定。在
setInterval
中，从第一个
setTimeout
中取出代码，这样它就可以立即运行。您已经它们计划在同一时间执行（大致）。和
$（文档）。ready（函数（…
）与
$（函数）相同（…
。两者都不需要。我删除了第一个超时，它可以正常工作，但它在大约10-20秒后启动，然后正常工作。可能资源加载需要时间。不确定。很好的解决方案，一个小问题是它最终会失败（经过很长时间），假设只有两个图像
index^=1
用于切换可能会更安全，因为它只会无限期地在0和1之间切换（通过执行按位异或），或者如果有两个以上的源，那么如果
index>source.length
将阻止这个很好的解决方案，一个小错误是它最终会失败（经过很长一段时间后），假设只有两个图像
index^=1
用于切换可能会更安全，因为它只会无限期地在0和1之间切换（通过执行位异或）或者如果超过2个源，那么如果对于
index>source.length
将其包装为0，这将阻止这个很好的解决方案，但是需要注意的是，这个解决方案在IE@Brian中不起作用：对于旧版浏览器来说非常正确。绝对值得指出。我认为可以肯定地说，
I
永远不会变得太大。考虑到它的运行时间是IE@Brian:呃，其次，在它达到
数字之前不应该有问题。MAX_SAFE_INTEGER
，也就是
9007199254740991
，它需要数百万年才能达到不错的解决方案！不错的解决方案，但有一点需要注意的是，这个解决方案在IE@Brian中不起作用：对于传统浏览器，这是非常正确的。绝对值得指出。我认为可以肯定地说，
I
永远不会变得太大。考虑到它每秒运行5次，并且在达到
Number.MAX\u SAF之前不应该出现问题E_INTEGER
，也就是
9007199254740991
，需要数百万年才能到达那里；-）不过这是一个不错的解决方案！