Javascript 切换浏览器选项卡时，Typed.js文本动画暂停

我在我的网站上使用typed.js，我在主页滑块上的键入文本动画方面遇到了问题。当您停留在页面上时，键入动画将同步，但一旦切换选项卡，键入动画将暂停，而背景滑块将继续循环，从而导致文本与其相关的背景不同步。切换浏览器选项卡时，是否有任何方法阻止键入的动画暂停，并使其继续与背景滑块循环

这是我用于旋转木马（使用Backstretch）和typed.js的javascript

        $('bigWrapper').backstretch([
            "img/homeIntro.jpg"
          , "img/videoIntro.jpg"
          , "img/photoIntro.jpg"
          , "img/mixingIntro.jpg"
          , "img/webIntro.jpg"
        ], {fade: 750});
        
        $('bigWrapper').backstretch("pause");
        
        //autotype

        $(".TextHolder2").typed({
            strings: ["Production", "Videography", "Photography", "Audio Engineering", "Web Development"],
            typeSpeed: 30,
            backDelay: 1500,
            loop: true,
            preStringTyped: function(pos, self) {       
                $('bigWrapper').backstretch('show', pos);
            };
        });

---

这是因为浏览器如何处理typed.js使用的

setTimeout（）

。为了节省资源，大多数浏览器在您不关注页面/选项卡时会停止运行这些异步回调

试图在浏览器中同步两个不同的计时器是徒劳的。相反，您应该将旋转木马（滑块）视为主计时器和从计时器

查看您的旋转木马插件是否有某种可以收听的

next

或

advance

事件。然后看看是否可以将键入的配置为在您告诉它之前不前进；基本上是无限的延迟。然后，当一个

advance

事件从您的旋转木马中触发时，您还可以告诉输入的

advance

。这样他们总是保持同步

您使用的是具有“开始暂停”选项的

$('whatever').backstretch({
    paused: true
});

然后，您可以在Backstretch转换时侦听要控制的类型上的事件。例如，下面的（猜测）将使backstretch转到与键入的帧相同的“帧”，就像帧即将被键入一样

$('something').typed({
    preStringTyped: function(pos, self) {
        $('whatever').backstretch('show', pos);
    });
});

---

对我来说，它从加载的那一刻起就不同步了。是的，当它第一次加载页面时就会发生这种情况。我必须优化旋转木马中的图像，以避免加载所需的时间过长。请将jquery backstretch部分添加到您的页面中，我们可以查看是否可以使其满足您的要求。完成后，我尝试了下面的建议，但现在没有图像加载，文本不再显示。取出

持续时间：2300，

，不再需要它，在

循环：true

和

预字符串类型：…

之间添加一个

，

。另外，如果

paused:true

不起作用，那么尝试在backstretch部分的正下方添加一行，上面写着

$（'bigWrapper'）。backstretch（“pause”）就我个人而言，我建议采取相反的方式，让背景等到文本开始变化，然后再开始下一个动画。我正在使用backstretch插件，我不确定这是否可行。。我可能需要更改插件。你好像把自己置身于地狱。对于这种定制的“多媒体”体验，您最好自己构建元素，以便能够完全控制它们。我认为可以通过设置
反向拉伸开始
暂停
，然后使用一个
键入的
钩子来完成（这里有一个列表，
onComplete
，
preStringTyped
，
onStringTyped
，
onLastStringBackspaced
，
onTypingPaused
，
onReset
，
onStop
，
onStart
，
onstroy onstroy
，
onstroy
，
onstroy
）来触发
.backstretch>.backstretch（“下一步”）
(“show”，n）
以显示相关幻灯片。我会将其添加到答案中。