[JavaScript]记录完成轮播过程中的几个点
2021-07-04 17:05
标签：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的时间。 2.轮播絮乱 表现为：一旦浏览器离开轮播的tab，跳转到其他的tab后过一段时间再回来，轮播的速度会加快。 解决方法：给document添加 MDN 浏览器标签页被隐藏或显示的时候会触发visibilitychange事件. 我们只要判断：如果标签页被隐藏，则轮播停止；标签页被显示，轮播继续，就可以解决这个问题了。 如： [JavaScript]记录完成轮播过程中的几个点 标签：href lis val enter 绑定 需要 web int 过程 原文地址：https://www.cnblogs.com/No-harm/p/9613234.html记录几个坑
$(‘#slidesWrapper‘).on(‘mouseenter‘,function(){
window.clearInterval(timerId)
})
// 当鼠标移出
$(‘#slidesWrapper‘).on(‘mouseleave‘,function(){
timerId = setTimer()
})visibilitychange事件。
document.addEventListener(‘visibilitychange‘,function(e){
if(document.hidden){
window.clearInterval(timerId)
}else{
timerId = setTimer()
console.log(2)
}
})
上一篇：Java数组列表反转
下一篇：JAVA 对象序列化
文章标题：[JavaScript]记录完成轮播过程中的几个点
文章链接：http://soscw.com/index.php/essay/101808.html