原始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 (将#修改为@）