jQuery：2 img src之間的無限循環交替

Question

我正在嘗試創建一個帶有兩個圖像的簡單GIF動畫。 我想使用相同的img標簽，並在循環上更改2個src鏈接。

這是我到目前為止的內容，但不確定如何解決：

的HTML

<img class="logo" src="https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg" draggable="false">

jQuery的

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

簡化CSS

body {
  background: black;
}

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

Answer 1

我不明白為什么需要setInterval和setTimeout 。 這工作得很好。 https://jsbin.com/zewudijara/edit?js，控制台，輸出

$(function(){
  var $logo = $('.logo');
  var index = 0;
  var sources = [
    'https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg',
    'https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws2.svg',
  ];

  setInterval(function () {
    index ^= 1;
    $logo.attr('src', sources[index]);
  }, 400);
});

收到@Brian的出色反饋后，我更新了答案，使用按位運算在1和0之間切換。

Answer 2

要將我的以上注釋放入代碼中，解決方法如下：

$(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);
});

您只希望通過setTimeout延遲一個，而不是兩個都延遲。

---

就是說，因為這是一個切換，所以我可能會這樣：

$(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 timer = 200 var logo = document.querySelector(".logo") setTimeout(function f(i) { logo.src = "https://dummyimage.com/240x180/0000fc/c4c4c4.gif&text=" + ((i % 2) + 1); setTimeout(f, timer, i + 1); }, timer, 1); }); 

 <img class=logo src="https://dummyimage.com/240x180/0000fc/c4c4c4.gif&text=1"> 

Answer 3

以為我會分享我自己的方法。 上面的兩個評論都是正確的。 從本質上講，問題是當您調用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);
}