Keep the JS/jQuery code working in Safari when the tab is not active

Question

我有一个如下所示的 JS/jQuery 代码，其中我希望在会话选项卡不活动时保持 JS/jQuery 代码工作。

以下代码在 Google Chrome 中完全正常，但在 Safari 中不起作用。

jQuery(document).ready(function ($) {

    let lastActivity = <?php echo time(); ?>;  // Line A

    let now = <?php echo time(); ?>;

    let logoutAfter = 3600;   // page will logout after 1800 seconds if there is no activity

    let userName = "<?php echo $_SESSION['user_name']; ?>";

    let timer = setInterval(function () {
        now++;
        let delta = now - lastActivity;
        console.log(delta);  // Line A
        if (delta > logoutAfter) {
            clearInterval(timer);
            //DO AJAX REQUEST TO close.php
            $.ajax({
                url: "/control/admin.php",
                type: 'GET', // GET also fine
                data: {action: 'logout', user_name: userName},
                success: function (data) {
                    window.location.href = "admin.php";
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        }
    }, 1000); //<-- you can increase it( till <= logoutAfter ) for better performance as suggested by @"Space Coding"
});

Line A 的值在标签页处于非活动状态时不会在 Safari 中增加，但在 Google Chrome 中可以正常工作。在 Google Chrome 中，它按预期工作。

Answer 1

您可以用计算时间差来替换计数器（它计算秒数）。

let lastActivity = new Date();
let logoutAfter = 3600;
...
let delta = (new Date()).getTime() - lastActivity.getTime();
if (delta > logoutAfter) {
    ...
}

附：因此，即使在选项卡处于非活动状态时脚本本身被冻结，它也必须工作。用户激活此选项卡时将调用间隔处理程序。

Answer 2

此方法在打开多个选项卡时无法正常工作。如果用户打开新标签并开始在其中工作，则较早的标签将注销用户，因为他在该标签中不活动。

为了克服这个问题，我建议使用 ajax 调用检查服务器的最后活动时间，而不是仅使用 javascript。

Answer 3

根据this very thorough (but old) answer，setInterval() 在 Safari 和 Chrome 上的非活动选项卡上的执行限制为最大 1/s - 但不会停止。这里还有很多关于 Javascript 在非活动选项卡上暂停或取消优先级的问题，其中一些包括解决方案：

• How can I make setInterval also work when a tab is inactive in Chrome?
• iOS 5 pauses JavaScript when tab is not active
• Safari JavaScript setTimeout stops when minimized
• Chrome: timeouts/interval suspended in background tabs?

可能最好的选择是use Web workers：

Web Workers 是一种让 Web 内容在后台线程中运行脚本的简单方法。工作线程可以在不干扰用户界面的情况下执行任务。

在上述问题之一的答案中有an example of how to do that。

但还有一个更简单的选择，但考虑到您依赖此方法来注销用户，您应该评估它是否安全。

我对您的代码的测试反映了the question I linked to earlier，它描述了setInterval() 正在减慢，但并未停止。对我来说，Safari（v 13.1，macOS 10.14.6）实际上并没有完全暂停 Javascript，而是通过增加数量来减慢循环的执行速度。我通过打开开发控制台并观察console.log(delta) 消息的输出来看到这一点 - 它们会变慢，首先每 2 秒运行一次，然后每 4 秒运行一次，依此类推，尽管有时速度更快。但他们并没有停下来。

该输出还提供了有关问题和解决方案的提示。控制台上显示的delta 值不代表自lastActivity 以来的实际 时间差。他们只是增加数字。如果您在最后一个值 10 秒后看到控制台上出现delta 值，那么它在逻辑上应该是+10，对吧？但事实并非如此，它只是更高一级。

这就是问题所在——代码没有计算真正的时间差，它只是计算循环的迭代次数：

let timer = setInterval(function () {
    now++;    // <-- problem

此代码正确地将now 设置为当前时间仅如果setInterval() 每秒运行一次。但我们知道，当标签处于非活动状态时，它不会。在这种情况下，它只是计算循环运行的次数，与实际经过的时间无关。

为了解决这个问题，我们必须根据实时确定now。为此，让我们切换到使用 JS 来计算我们的时间戳（PHP 仅在页面加载时呈现一次，因此如果您在循环中使用它，它将保持在初始值不变）：

// Note that JS gives us milliseconds, not seconds
let lastActivity = Date.now();
let now = Date.now();
let logoutAfter = 3600 * 1000;

let timer = setInterval(function () {
    // PHP won't work, time() is rendered only once, on page load 
    // let now = <?php echo time(); ?>;
    now = Date.now();
    let delta = now - lastActivity;
    console.log('New timer loop, now:', now, '; delta:', delta);

现在，即使迭代之间有 10 秒的暂停，delta 也将是自页面加载以来经过的时间的true 度量。因此，即使用户切换到另一个选项卡，每次循环运行时，它都会正确跟踪时间，即使它不是每秒都发生。

那么这对你来说意味着什么？

1. 根据您的报告，JS 根本没有在非活动选项卡中运行。在这种情况下，选项卡可能会一直处于登录状态，而用户应该已经注销了很久。但是，假设当您切换回选项卡时 JS 再次启动，循环的第一次迭代将正确计算经过的时间。如果它大于您的注销期限，您将被注销。因此，即使选项卡的登录时间超过了应有的时间，用户也无法使用它，因为一旦切换到它，他们就会被注销。请注意，“尽快”实际上是指“在 1 秒内加上 AJAX 查询成功注销用户所需的时间”。

2. 在我的测试中，JS 不会在不活动的 Safari 选项卡中停止，而是会减慢速度。在这种情况下，这意味着用户将在非活动选项卡上自动注销，尽管不是在他们应该在的时间。如果循环每 8 秒运行一次，则可能意味着用户将在 7 秒后注销。如果迭代速度更慢，延迟可能会更大。假设一旦用户切换回选项卡，JS 会再次正常启动，行为将与上述完全相同，在这种情况下，第一次迭代会将它们注销。

编辑

这里是简化的完整代码和a JSFiddle showing it running and working。

jQuery(document).ready(function($) {
    let lastActivity = Date.now();
    let now = Date.now();
    let logoutAfter = 3600 * 1000;

    let timer = setInterval(function() {    
        now = Date.now();
        let delta = now - lastActivity;
        console.log('New timer loop, now:', now, '; delta:', delta);
    
        if (delta > logoutAfter) {
            alert('logout!');
        }
    }, 1000); 
});