setInterval，clearInterval，setTimeout衝突搞砸幻燈片

我有一個幻燈片，自動播放document.ready通過觸發我的左箭頭單擊setInterval。我試圖在導航箭頭被點擊時停止自動播放，同時仍然允許箭頭瀏覽幻燈片。setInterval，clearInterval，setTimeout衝突搞砸幻燈片

這就完成了。

var intervalId = window.setInterval(switchLeft, 4000); 

$("#leftarrow, #rightarrow").click(function() { 
    window.clearInterval(intervalId); 
});

但是我希望自動播放能夠在8秒鐘內沒有被點擊的情況下反彈。我試着將setTimeout加入到點擊功能中，然後重新啓用setInterval，但它會在暫停期間統計用戶導航的所有點擊，並開始像瘋狂地扔我的幻燈片。（我有移動的每次點擊圖像的兩層）。

setTimeout(function() { 
    intervalId = window.setInterval(switchLeft, 4000) 
}, 8000);

我已經試過包裝的東西，在一個setTimeout函數，但我只是最終得到不同的怪事。

感謝您的幫助，查理·馬吉

來源

2013-11-22 charliemagee

請爲我們提供的jsfiddle所以我們可以幫助您更輕鬆 – sjkm

您需要取消setTimeout()如果點擊箭頭它激發之前，所以你沒有得到多個定時器要在一次（這肯定會表現出怪異）。

我不完全地按照你想上的箭頭做什麼，但是這個代碼應該管理定時器：

var intervalId = setInterval(switchLeft, 4000); 
var timeoutId; 

$("#leftarrow, #rightarrow").click(function() { 

    // clear any relevant timers that might be going 
    // so we never get multiple timers going 
    clearInterval(intervalId); 
    clearTimeout(timeoutId); 

    // restart the interval in 8 seconds 
    timeoutId = setTimeout(function() { 
     intervalId = window.setInterval(switchLeft, 4000) 
    }, 8000); 
});

來源

2013-11-22 23:18:30 jfriend00

你的榜樣呢與我所做的一樣。 switchLeft是我的功能，也是由左箭頭觸發的。它從右向左發送幻燈片。 switchRight正好相反。沒有計時器隱藏在其中。如果我點擊右箭頭幾次，然後左邊的箭頭，然後很快，所有的東西都在這個地方來回移動，因爲他們試圖趕上點擊和setInterval。看熱鬧，但不是我需要的。我想我需要一種方法來停止點擊的時間間隔，但是忽略8000的這個點擊功能。 – charliemagee

也許像是在使用setTimeout顯示並隱藏的箭頭頂部的透明div上進行設置和清除？ – charliemagee

@charliemagee - 我在代碼中進行了一次更正（刪除了原始代碼所具有的'var'，以便正確使用更高範圍的變量）。這應該有所幫助。如果你的switchLeft函數也有一個動畫，那麼你可能還需要在click函數中停止這個動畫。這現在適當地管理這些定時器。如果你需要其他問題的幫助，你將不得不向我們展示剩下的代碼。 – jfriend00

setInterval，clearInterval，setTimeout衝突搞砸幻燈片

回答

相關問題