[JavaScript] Records several points in the process of completing the carousel

Record a few pits

Before the carousel:

Complete code: GITHUB

Effect preview: GitHub

Recently completed carousel:

Complete code: GITHUB

Effect preview: GitHub

Solve two problems in completing the carousel:

1.setInterval () Conflicts with the button-bound event.

The performance is: SetInterval () set every 3S carousel, in the absence of any action interference, the rotation is normal; but when you need to click the button to jump to another picture, from the click of the button to the success of the image jump time, assuming 1S, also calculate to SetInterval () Set time, that is, from A1 to A2 need 3S, in the process of A1 to A2 2.5S, we click on A3, he will not stay on the A3 3S and then carousel, but from A3 to A4 only need 0.5S (3-2.5).

Workaround: Add a listener event to the carousel component, and once the mouse moves into the component range, the carousel stops; the mouse moves out and the carousel continues. This will ensure that each picture to the next picture will take 3S of time.

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

// when the mouse is removed
$(‘#slidesWrapper‘).on(‘mouseleave‘,function(){
     timerId = setTimer()
})

2. Carousel Confusion

The performance is: Once the browser leaves the Carousel tab, jumps to the other tab after a period of time to come back, the speed of the carousel will be accelerated.

Workaround: Add an event to the documentvisibilitychange.

MDN

The Visibilitychange event is triggered when the browser tab is hidden or displayed.

We just have to judge: if the tab is hidden, then the carousel stops, the tab is displayed, and the carousel continues to solve the problem.

Such as:

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

[JavaScript] Records several points in the process of completing the carousel