如何在后台获取递归调用setTimeout函数保持活动

Question

我有一个网页，它使用setTimeout递归调用函数。 该页面还具有html5 sms链接（js重定向不是href）。 当启动msg应用程序时，网页似乎并没有在后台运行，而我希望它们会在后台运行。 我使用全局计数器变量来计数并在页面上显示checkAuth后台功能已运行了多少次，并且当我返回页面时，该数字没有像我第一次访问页面时那样每3秒增加一次，也没有是否像我希望的那样每3秒重新开始增加一次。 直到msg应用程序将浏览器发送到后台，这两个功能似乎都可以首次使用。

即使它们不在后台运行，我也可以， 但是如何在前景运行时重新启动它呢？ 那是我要做的最低要求。 谢谢。

//event that starts the process
$("#connect").click(function (){checkAuth();});

function checkAuth() {

    //global var that counts how many times this function is called
    authAttempts++;

    //displays checkAuth run count on page.
    $("#aa").text(authAttempts.toString());

    $.get(encodeURI("myurl.aspx?phone=" + getCookie("phone") + "&ec=" + getCookie("ec") + "&authToken=" + getCookie("at") + "&uh=" + getCookie("uh") + "&mode=" + getCookie("mode")), function (data) {
        $("#ajaxResults").html(data);
        if ($("#authYes").length) {
            var mode = getCookie("mode");
            if (mode == "drv") {
                window.location.replace("drv.aspx" + query);
            }
            else if (mode == "dsp") {
                window.location.replace("dsp.aspx" + query);
            }
        }

        else if ($("#authPending").length) {

            if (++attempts >= 10) {
                alert("Authentication Timed-out. Please try to connect again");
                $("#link").html("");

                // if this times out then force a new authentication value
                // to keep the pending value from being stuck

                var r = Math.random() * 1000000000;
                var ri = r.toFixed(0);
                var aToken = ri.toString();

                $("#at").val(aToken);
                setCookie("authToken", aToken, 1);
            }
            else {
                setTimeout(checkAuth, 3000);
            }
        }

        //must have been no good so start the authentication process
        //authSent is global var to record if auth has already been sent
        else if (authSent == false) {
            authSent = true;
            sendAuth();
        }
    });
}

function sendAuth() {
    // generate a new token

    var r = Math.random() * 1000000000;
    var ri = r.toFixed(0);
    var aToken = ri.toString();

    $("#at").val(aToken);

    setCookie("at", $("#at").val(), 1);

    checkAuth();
    //launch msgs app so they can send a prefilled text message
    setTimeout(showMsgsApp, 500);
}
function showMsgsApp() {
    window.location = "sms:19789652017&body=" + $("#at").val() + "-" + $("#ec").val() + "-" + $("#mode").val() + "-" + $("#uh").val();
}

Answer 1

您可以使用网络工作者来执行代码，即使您的页面在后台，我也没有在您的情况下在电话上对其进行过测试，但是在chrome标签页打开的情况下，它确实可以执行代码未启用，因此它可能适合您的需求。

这个想法是使用一个Webworker，它将递归地运行超时，并且在每个刻度上，将消息发布到窗口，该窗口将在每次收到消息时侦听给定的消息并执行checkAuth。

例：

创建一个简单的webworker：worker.js

setInterval(function(){
  postMessage('triggerAuth');
}, 3000)

现在，在页面上，而不是创建第一次超时，您应该执行Webworker：

var authWorker = new Worker("worker.js");

authWorker.onmessage = function (oEvent) {
   checkAuth();
};

然后，请确保在成功完成操作后终止该工作程序。

authWorker.terminate();

原因是，虽然该选项卡不处于活动状态，但它不会响应超时或间隔，这就是为什么未执行代码的原因。

同样，这是使用无效的浏览器标签进行测试的，不确定与您的移动示例是否相同。

Answer 2

您应该做的是更改为requestAnimationFrame而不是setTimeout

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

当选项卡返回到前台时，代码将正确启动。