Question

我有一个进度条，在窗口加载一段时间后3秒后运行。即使用户更改选项卡或打开新浏览器，它也会继续运行。如果用户更改选项卡或浏览器，我想暂停它，并在选项卡激活时恢复它。

这是我当前影响jQuery进度条的代码。

<script type="text/javascript">
        $(document).ready(function(){
            setTimeout(function(){
                $(".wait").hide();
                $("#progressTimer").progressTimer({
                    timeLimit: <?php echo $adf['ac_time']; ?>,
                    onFinish: function(){
                        $('#progressTimer').fadeOut(1000);
                        $("#captcha").fadeIn(3000);
                    }
                });
            }, 3000);
        });
</script>

Answer 1

暂停并开始更改标签上的进度条：

$(window).blur(function(e) {
    // apply logic to pause
});
$(window).focus(function(e) {
    //apply logic to resume or start the progress bar
});

Answer 2

您必须编辑插件才能使此行为生效，因为插件internally使用的是setInterval和clearInterval，它们必须分别替换为requestAnimationFrame和cancelAnimationFrame。

由于插件使用setInterval，当用户切换标签时，动画不会停止，但是当用户切换标签时，动画将停止！请使用requestAnimationFrame！

如果选项卡或浏览器已更改，则暂停jQuery进度条

2 个答案:

暂停并开始更改标签上的进度条：