Question

我们需要解决以下问题。

我们目前每隔30秒刷新一次屏幕，在实际刷新之前我们需要做的是检查网站是否仍在运行以及是否有网络可以访问该页面。

如果页面关闭，那么我们将刷新延迟6秒，重复5次。

如果第五次尝试显示网站仍然关闭，则会显示错误消息。

这工作正常，但我们需要检查网站是否仍然可用（在刷新之前ping网站），如果浏览器开始刷新但是丢失连接或服务器在刷新后关闭，我们还需要一个解决方案已经开始了

这是当前的代码

window.onload = function () {
    var refresh_rate = 30; //<-- Second until refresh
    var connection_attempts=5;  ////// Connection attempts
    var failed_seconds=6;
    var inactivity_counter = 0;
    var connection_failed= 0;

    function reset1() {
        inactivity_counter = 0;
        console.log("Reset1");
    }

    function reset2() {
        inactivity_counter = 0;
        console.log("Reset2");
    }

    function reset3() {
        inactivity_counter = 0;
        connection_failed = 0;
        console.log("Reset3");
    }

    function reset_network() {
        inactivity_counter = (refresh_rate - failed_seconds);
        console.log("ResetNetwork");
    }

    setInterval(function () {
        inactivity_counter++;
        refreshCheck();
    }, 1000);

    function can_i_refresh() {
        if (inactivity_counter >= refresh_rate) {
            return true;
        }
        return false;
    }

    function refreshCheck() {
        if (can_i_refresh()) {
            if(navigator.onLine) {
                connection_failed='0';
                window.location.href='alreadybooked.php?location=5';
                inactivity_counter = 0;
            }
            else {
                connection_failed++;
                console.log(connection_failed);
                if(connection_failed==connection_attempts) {
                    alert("Error 1001: This check-in device is currently experiencing issues. Please check-in on another device. If you still experience issues, please press the 'OK' button and proceed to reception");
                    return false;
                }
                reset_network(); 
            }
        }
        else {
            console.log(inactivity_counter);
        }
    }

    window.addEventListener("click", reset1);
    window.addEventListener("mousemove", reset2);
};

Answer 1

这应该做你需要的。

函数setupPageReload()创建超时，以便在指定的延迟后重新加载页面。实际的重新加载是在临时元素中完成的，因此检查可用性和重新加载是一回事。如果重新加载没有发生（由于任何原因），则失败计数器会递增，如果有足够的重试，将执行fatalError()函数。如果它工作，那么它只是用刚刚下载的内容替换当前页面的内容。除非出现致命错误＆＃34;然后再次执行该函数以全程启动该过程。

var refreshRate = 30;
var connectionAttempts = 5;
var connectionFailed = 0;

function setupPageReload() {

    setTimeout(function() {
        $("<div/>").load(location.href + " body", function(response, status) {
            if (status == "success") {
                connectionFailed = 0;
                $("body").html(response);
                setupPageReload();
            }
            else {
                if (++connectionFailed === connectionAttempts) {
                    fatalError();
                }
                else {
                    setupPageReload();
                }
            }
        });
    }, refreshRate * 1000);
}

function fatalError() {
    alert("Error 1001: This check-in device is currently experiencing issues. " +
        "Please check-in on another device. If you still experience issues, " +
        "please press the 'OK' button and proceed to reception");
}

window.onload = setupPageReload;

顺便提一下，这个方法需要jQuery，因为它执行ajax下载并获得<body/>标记的内容，比在vanilla js中更容易获取。如果您还没有在相关网页中使用该内容，那么您需要添加脚本包含。

在加载页面之前检查页面是否已启动

1 个答案: