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

標籤：href   lis   val   enter   綁定   需要   web   int   過程   

記錄幾個坑

之前的輪播：

完整代碼：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]記錄完成輪播過程中的幾個點