記錄幾個坑

之前的輪播：

完整代碼：GitHub

效果預覽：GitHub

最近完成的輪播：

完整代碼：GitHub

效果預覽：GitHub

在完成輪播中解決兩個問題：

1.setInterval()會和按鈕綁定的事件發生沖突。

表現為：setInterval()設置了每3S輪播一次，在沒有任何動作幹擾的情況下，輪播正常；但是當需要點擊按鈕跳轉到其他圖片時，從點擊按鈕到圖片跳轉成功的這段時間，假設是1S，也會計算到setInterval()設定的時間中；即從A1到A2需要3S，在A1到A2的過程中2.5S時，我們點擊A3，他就不會在A3上停留3S再輪播，而是從A3到A4只需要0.5S(3-2.5)。

解決辦法：給輪播組件添加監聽事件，一旦鼠標移入組件範圍，輪播停止；鼠標移出，輪播繼續。這樣就能保證每一張圖片到下一張圖片都需要3S的時間。

$(‘#slidesWrapper‘).on(‘mouseenter‘,function(){
    window.clearInterval(timerId)
})

// 當鼠標移出
$(‘#slidesWrapper‘).on(‘mouseleave‘,function(){
    timerId = setTimer()
})

2.輪播絮亂

表現為：一旦瀏覽器離開輪播的tab，跳轉到其他的tab後過一段時間再回來，輪播的速度會加快。

解決方法：給document添加visibilitychange

MDN

瀏覽器標簽頁被隱藏或顯示的時候會觸發visibilitychange事件.

我們只要判斷：如果標簽頁被隱藏，則輪播停止；標簽頁被顯示，輪播繼續，就可以解決這個問題了。

如：

document.addEventListener(‘visibilitychange‘,function(e){
    if(document.hidden){
        window.clearInterval(timerId)
    }else{
        timerId = setTimer()
        console.log(2)
    }
})

[JavaScript]記錄完成輪播過程中的幾個點