[JavaScript]记录完成轮播过程中的几个点

Posted 2021-01-05 no-harm

记录几个坑

之前的轮播：

完整代码：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)
    }
})