jquery setInterval + chrome選項卡+構建動畫，一次快速顯示所有動畫

Question

我已經閱讀了很多關於如何解決此問題的頁面（同時在stackoverflow上），但沒有任何適用於我的作品。下面是我目前擁有的代碼：

var initialFadeIn = 1000;   //initial fade-in time (in milliseconds) 
    var itemInterval = 5000;   //interval between items (in milliseconds) 
    var fadeTime = 2500;     //cross-fade time (in milliseconds) 

    var infiniteLoop = setTimeout(function(){ 
      position1.eq(currentItem1).stop(true, true).fadeOut(fadeTime); 
      if(currentItem1 == numberOfItems1 -1) {currentItem1 = 0;}else{currentItem1++;} 
      position1.eq(currentItem1).stop(true, true).fadeIn(fadeTime); 
    }, itemInterval); 

我添加了.stop（真實的，真實的），但仍然是構建動畫，然後顯示的一次。

我也試過：

infiniteLoop(itemInterval, fadeTime, position1, currentItem1, numberOfItems1);  

function infiniteLoop(itemInterval, fadeTime, position1, currentItem1, numberOfItems1) { 
     setTimeout(function() { 
       position1.eq(currentItem1).stop(true, false).fadeOut(fadeTime); 
       if (currentItem1 == numberOfItems1 - 1) { 
         currentItem1 = 0; 
       } else { 
         currentItem1++; 
       } 
       position1.eq(currentItem1).stop(true, false).fadeIn(fadeTime, infiniteLoop(itemInterval, fadeTime, position1, currentItem1, numberOfItems1)); 
     }, itemInterval); 
} 

但它只是相同。

我能夠將它鏈接到window.focus（）/。blur（），但我寧願它停下來繼續在後臺運行 - 例如：某人正在使用Skype後臺頁面。

我應該嘗試的任何想法？

三江源

Answer 1

這行代碼是不正確的：

position1.eq(currentItem1).stop(true, false).fadeIn(fadeTime, infiniteLoop(itemInterval, fadeTime, position1, currentItem1, numberOfItems1)); 

你應該要傳遞一個函數作爲最後一個參數來fadeIn()和功能將被稱爲fadeIn()完成時。這不是這行代碼的作用。這行代碼在fadeIn()的開頭執行infiniteLoop函數，因爲您在參數列表中正確調用它，然後將該函數的返回值傳遞給fadeIn()函數。這確實會導致無限循環。

相反，你應該調用它像這樣：

position1.eq(currentItem1).stop(true, false).fadeIn(fadeTime, function() { 
    infiniteLoop(itemInterval, fadeTime, position1, currentItem1, numberOfItems1) 
}); 

這傳遞一個實際功能的淡入（）調用和淡入實際完成當該功能將在後面叫。

你的問題的其餘部分聽起來像也許你正試圖解決的問題，其中鉻和Firefox減慢計時器時，選項卡進入後臺，然後加速幾乎在追趕模式時，當涉及到前景，有解決方案。我不確定你想要什麼樣的解決方案，因爲你沒有真正解釋過。

最好的解決方案通常是在選項卡轉到背景時完全停止動畫。 Chrome提供experimental page visibility API以允許您這樣做。這是一個您可以聽到的新事件，它告訴您何時該頁面不可見，以及何時該頁面再次可見，並且您可以啓動/停止任何長時間運行的定時器。

下面是使用API​​從文檔頁面的一些示例代碼：

//startSimulation and pauseSimulation defined elsewhere 

function handleVisibilityChange() { 
    if (document.webkitHidden) { 
    pauseSimulation(); 
    } else { 
    startSimulation(); 
    } 
} 

document.addEventListener("webkitvisibilitychange", handleVisibilityChange, false); 

使用.stop(true, true)將清除動畫隊列，並提前動畫給定對象的最終運行下一個動畫前，但對於常規選項卡可見性/計時器減速問題並不是真正的解決方案。唯一真正的解決方法是停止在後臺選項卡中運行定時器/動畫。

作爲其他瀏覽器的解決方法，有些人會跟蹤焦點離開窗口的時間，因爲這也會在選項卡轉到背景時發生，儘管它不完美，因爲窗口仍然可見，但在另一個瀏覽器窗口失去焦點時。不完美，但也許比沒有好。

如果你真的想問別的東西，那麼請澄清你的問題到底是什麼。你已經發布了一堆代碼，但沒有真正清楚你的問題是什麼。