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

Posted no-harm

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[JavaScript]记录完成轮播过程中的几个点相关的知识,希望对你有一定的参考价值。

记录几个坑

之前的轮播:

完整代码: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]记录完成轮播过程中的几个点的主要内容,如果未能解决你的问题,请参考以下文章

Kotlin委托必须重视的几个点

Kotlin委托必须重视的几个点

[JSONP]关于JSONP的几个点

[系列] Go 使用 defer 函数 要注意的几个点

关于图片轮播的几种思路

图片轮播的几个小程序