使用Javascript - 圖像之間的切換與不同的時間間隔

Question

我想自動2個PNG圖像之間在兩個不同的時間間隔一個初始延遲之後切換：顯示2秒鐘

1. 圖像A（初始延遲）
2. 圖像B被示出0.3秒
所示6秒
3. 來自步驟2

0重複

圖像A

我發現問題Javascript - Switching Between Two Images與letiagoalves’教學代碼，示出如何將兩個圖像之間交替，示出了用於相同量的時間兩個圖像：

<img id="Change_Image" src="http://placehold.it/200x200" alt="Letter A"> 

function change_image() { 
    var url = document.getElementById('Change_Image').src; 
    if (url == 'http://placehold.it/200x200') { 
     document.getElementById('Change_Image').src = 'http://placehold.it/100x100'; 
    } else { 
     document.getElementById('Change_Image').src = 'http://placehold.it/200x200'; 
    } 
} 

setInterval(change_image, 2000); 

(Working demo at jsfiddle)

...並試圖修改它通過使用各種組合setInterval()和setTimeout來顯示不同的圖像，迄今無濟於事：

1. 使用一個setTimeout()和兩個setInterval()：
   • 這裏思想是顯示一個啓動圖像A和start_animation()使用setTimeout()等待2秒鐘調用change_image()顯示圖像之前B.同時每0.3秒呼叫change_back()，使得圖像B從不顯示超過0.3秒，並且每6秒調用一次change_image()，使得圖像B每6秒顯示一次。
   • 結果 - 圖像切換，但間隔時間有點不確定：有時圖像B顯示在預期的時間附近，有時候它會非常短暫地閃爍。我想這是因爲change_image()和change_back()同時執行時的干擾模式。

代碼：

function start_animation() { 
     change_image(); 
} 

function change_image() { 
    document.getElementById('Change_Image').src = 'http://placehold.it/100x100'; 
} 

function change_back() { 
    document.getElementById('Change_Image').src ='http://placehold.it/200x200'; 
} 

var initialTimout = 2000; //Time in milliseconds 
var longInterval = 6000; //Time in milliseconds 
var shortInterval = 300; //Time in milliseconds 

setTimeout(start_animation, initialTimout); 
setInterval(change_image, longInterval); 
setInterval(change_back, shortInterval); 

(Working demo at jsfiddle)

使用一個setInterval()和改變間隔，因爲我們走：

• 這裏的想法是change_image()照顧所有的圖像變化，並根據顯示哪個圖像，setInterval的時間間隔發生了變化。
• 結果 - 此解決方案同時顯示兩個圖像（初始超時時間），這不是目標。我研究瞭如何在函數外部更改變量，但必須要麼是錯誤的，要麼JS不允許在調用setInterval()後更改時間間隔。

代碼：

interval = 2000; 

function change_image() { 
    var url = document.getElementById('Change_Image').src; 
    if (url == 'http://placehold.it/200x200') { 
     document.getElementById('Change_Image').src = 'http://placehold.it/100x100'; 
     window.interval = 300; 
    } else { 
     document.getElementById('Change_Image').src = 'http://placehold.it/200x200'; 
     window.interval = 6000; 
    } 
} 

setInterval(change_image, interval); 

(Working demo at jsfiddle)

使用連續setTimeout()的：

• 想到這裏是讓change_image()和change_back()在最初的2秒超時後一遍又一遍地呼叫對方，並使用setTimeout()來確保呼叫延遲並且它們之間的時間是正確的。
• 結果 - 似乎根本沒有工作：只顯示圖像A.

代碼：

function start_animation() { 
    change_image(); 
} 

function change_image() { 
    document.getElementById('Change_Image').src = 'http://placehold.it/100x100'; 
    change_back(); 
} 

function change_back() { 
    document.getElementById('Change_Image').src ='http://placehold.it/200x200'; 
} 


setTimeout(start_animation, 2000); 
setTimeout(change_back(), 300); 
setTimeout(change_image(),6000); 

(Working demo at jsfiddle)

是否有Javascript功能來解決這個問題的好辦法？

怎麼樣？

Answer 1

連續使用setTimeouts是要走的路（＃3）。

當您嘗試在300ms到6000ms之間切換時，多個間隔（或所有間隔）將變得混亂。您正在考慮清除間隔或試圖以某種類型的作品「同步」圖像交換（但如果讓它運行足夠長時間，則會看到圖像A與圖像交換過快B等）。

以下是一個演示連續超時小提琴：

http://jsfiddle.net/cCvtL/43/

爲了您的示例代碼，而不是一次全部設置你的計時器，你想將它們設置連續，定時器運行之後。對於2000的初始超時值，我們將檢查undefined值（來自最初的活套呼叫）。之後，我們通過setTimeouts的參數300或6000。

function looper(url, interval){ 
    // If interval is undefined, we set the value to 2000 (initial) 
    // Otherwise, we use the value passed in 
    interval = interval === undefined ? 2000 : interval; 

    // If url is present, we switch the image source 
    if (url) { 
     document.getElementById('Change_Image').src = url; 
    } else { 
     // Default, to keep things tidy. 
     url = "http://placehold.it/200x200"; 
    } 

    // Timer logic to handle the next iteration 
    setTimeout(function() { 
     if (url === "http://placehold.it/200x200") { 
      looper("http://placehold.it/100x100", 300); 
     } else { 
      looper("http://placehold.it/200x200", 6000); 
     } 
    }, interval); 
} 

// Kick off the timer! 
looper(); 

Answer 2

從我的頭頂，Promise可以在這裏幫助;在你的情況下，這個普通的（完全未經測試的僞碼）理念是否有意義？ （在這裏，使用類似bluebird）

// Show an image, and returns a promise resolved after a number of ms 
var showImage = function (src, howLong) { 

    return new Promise(function (resolve, reject) { 

    document.getElementById('Change_Image').src = src 
    setTimeout(resolve, howLong) 

    }); 

} 


// The loop part 
var recur = function loop() { 
    return showImage("url-of-imageB",300).then(function() { 
     return showImage("url-of-imageA",6000) 
    }).then(recur); 
} 

// Show A, then loop 
showImage("url-of-imageA",2000).then(recur); 

Answer 3

下面是一個簡單的技巧，你幾乎得到了它，你只需要把超時

function change_image() { 
    var url = document.getElementById('Change_Image').src; 
    console.log(url); 
    if (url == 'wdw.tv.png') { 
     setTimeout(function(){ 
       document.getElementById('Change_Image').src = 'slmn.png'; 
      }, 2000); 
    } else { 
     setTimeout(function(){ 
       document.getElementById('Change_Image').src = 'wdw.tv.png'; 
      }, 2000); 
    } 
} 

setInterval(change_image, 4000); 

初始延遲爲4秒，將後顯示圖像A然後從那一點開始2秒鐘，它將在每兩秒鐘之間切換兩次。

只是間隔玩耍。雖然如果你有更多的圖像，它會有所不同。 希望這可以幫助你開始。

這裏是fiddle demo

**** ****編輯

根據下面的評論，這樣可以除去不穩定的行爲

function change_image(url) { 
    if(url){ 
     document.getElementById('Change_Image').src= url; 
    } 
    if (url == 'img1.png') { 
     window.setTimeout(change_image, 300, 'img2.gif'); 
    } else { 
     window.setTimeout(change_image, 6000, 'img1.png'); 
    } 
} 

setTimeout(change_image(), 2000); 

Demo Here