使用Javascript在Safari中检查互联网连接时出现奇怪的响应

每当用户的互联网连接丢失时，我都会尝试让某个div出现在我的网页上。

为了做到这一点，我使用一些Javascript来调用一个php文件，这个文件会回显"1"。如果接收到echo，则连接处于活动状态，Javascript将在控制台中打印"connected"。

如果没有接收到echo，那么Javascript将在控制台中打印"disconnected"，并显示div（这个div包含一条消息，让用户知道他们已经失去了连接）。div占据了整个页面，因此它有效地冻结了页面，防止用户与它交互，这正是我想要的。这是我正在使用的Javascript代码：

var checkConnection = function checkConnection() {
    $.ajax({
        url: 'php_scripts/checkconnection.php',
        type: "POST",
        cache: false,
        success: function() {
            document.getElementById('openOfflineDIV').style.display = 'none';
            console.log("connected"); },
            error: function() {
            document.getElementById('openOfflineDIV').style.display = 'block';
            console.log("disconnected"); }
    }).complete(function() {
        setTimeout(checkConnection, 2000);
    });
}

这是php文件"checkconnection.php"：

<?php echo '1'; ?>

正如你所看到的，我将这个函数设置为每2秒运行一次。

我遇到的问题是：这个函数在Chrome、Firefox、IE和Opera上运行得很好，但当我在Safari上测试它时，它会反复显示断开连接的div。我在几台设备（笔记本电脑、安卓手机等）上测试过它，它运行良好，但当我使用Safari在我的Ipad和Mac上测试它时，断开连接的div大约每10秒出现一次，它保持断开连接大约5秒，然后div消失/重新建立连接，但大约10秒后，div再次出现，这种情况一直持续下去。我不知道是什么原因造成的，但这似乎是Safari浏览器特有的问题。

有人知道是什么原因造成的吗？我已经尝试将函数重复的时间从2秒延长到5秒，这似乎降低了断开的div出现的频率，但它仍然经常出现。

有没有更好的方法来检查实时互联网连接？我不想再延长时间，因为理想情况下，连接检查将每秒运行一次。

我真的很感激关于如何解决这个问题的建议。提前感谢您在这方面的帮助。