如何解决原始JavaScript轮播:用户查看另一个标签后滑动竞赛,然后返回
我已经在Vanilla JavaScript中构建了一个小轮播程序,并且运行良好,除了当我访问另一个浏览器窗口然后又回到我的轮播窗口时。
幻灯片在彼此之间奔跑,好像它们在我去其他地方时一直在等待运行,直到到达幻灯片为止(如果我一直在看的话),幻灯片通常是从错边。然后它安定下来并继续按预期工作。此行为在Chrome和Firefox中是相同的。
完整代码位于GitHub上的https://github.com/lucywho/lightweight-carousel,但这是脚本的相关部分:
const slide = document.querySelectorAll("#carousel .carousel-slide");
const dots = document.querySelectorAll("#dots .dot");
const total = slide.length;
let last = total - 1;
let i = 0;
let timer;
let isTransitioning = false;
timer = setTimeout(moveSlide,5000);
function moveSlide(index) {
isTransitioning = true;
if (typeof index == "number") {
if (i === index) {
return;
} else {
slide[i].classList.remove("onscreen");
dots[i].classList.remove("fill-in");
slide[i].classList.add("offscreen-left");
i = index;
dots[i].classList.add("fill-in");
slide[i].classList.add("onscreen");
}
} else if (i < last) {
slide[i].classList.remove("onscreen");
dots[i].classList.remove("fill-in");
slide[i].classList.add("offscreen-left");
i++;
dots[i].classList.add("fill-in");
slide[i].classList.add("onscreen");
} else if (i === last) {
slide[i].classList.remove("onscreen");
dots[i].classList.remove("fill-in");
slide[i].classList.add("offscreen-left");
i = 0;
dots[i].classList.add("fill-in");
slide[i].classList.add("onscreen");
}
timer = setTimeout(moveSlide,7000);
}
document.addEventListener("transitionend",function(event) {
if (event.target.classList.contains("offscreen-left")) {
event.target.classList.remove("offscreen-left");
isTransitioning = false;
}
我是否正确地认为问题与脚本即使在不显示页面时仍在后台继续运行有关?如果是这样,如何强制JavaScript暂停? (我尝试将它们全部包装在document.addEventListener("DOMContentLoaded",function(){}
中,但这没有帮助)
非常感谢。
ETA:感谢Andre,我尝试了以下方法。再次,它在页面加载时可以愉快地运行,但是当我从另一个选项卡返回时,我仍然感到有些奇怪。
let screenVis = true;
if (screenVis) {
...
carousel code
...
}
document.addEventListener("visibilitychange",function() {
if (document.hidden === true) {
screenVis = false;
} else {
screenVis = true;
}
});
那么,是我已经修改了代码(总是可能)还是发生了其他事情?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。