javascript - Typed.js 文本动画在浏览器选项卡切换时暂停

Question

我在我的网站上使用 typed.js，但我在主页 slider 上的键入文本动画方面遇到了问题。当您停留在页面上时，打字动画是同步的，但是一旦您切换选项卡，打字动画就会暂停，而背景 slider 会继续循环，从而导致文本与其相关的背景不同步。有没有什么方法可以在切换浏览器选项卡时阻止键入的动画暂停，并让它继续与背景 slider 一起循环？

这是我用于旋转木马(使用 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);
            };
        });

Answer 1

这是因为浏览器如何处理 typed.js 使用的 setTimeout()。为了节省资源，当您不专注于页面/标签时，大多数浏览器会停止运行这些异步回调。

尝试在浏览器中同步两个不同的计时器是徒劳的。相反，您应该将轮播( slider )视为主计时器和从属计时器。

查看您的旋转木马插件是否有某种您可以监听的next 或advance 事件。然后看看您是否可以将类型配置为在您告诉它之前不前进；基本上是无限延迟。然后，当 advance 事件从您的轮播中触发时，您也可以告诉 typed 为 advance。这样他们就始终保持同步。

您正在使用 Backstretch它有一个开始暂停的选项。

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

然后您可以监听 Typed 上的事件以控制 Backstretch 转换的时间。例如，以下(猜测)将使后伸进入与输入相同的“帧”，就像即将输入帧一样。

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