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

Source: Internet
Author: User
Tags set time setinterval


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


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.