JavaScript 重新连接/刷新/保持高负载或即将超时

Question

我在这里需要一些帮助。我有一个过渡或 2 个网页 (aspx)。第一页是播放视频，播放完毕后会重定向到第 2 页，然后再返回到第 1 页。循环将通过网络浏览器在智能电视中 24/7 继续。

我遇到了一个问题，每当遇到连接丢失时，我需要拿起遥控器刷新/重新打开网页：

或连接超时：

我尝试通过添加一些 JavaScript 来检查连接可用性来解决这个问题：

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended', myHandler, false);
    function myHandler(e) {
        if (Offline.state === 'up') {
            window.location.href = '../Slide/SlideshowLSI.aspx';
        }
        else {
            this.currentTime = 0;
            this.play();
        }

    }
</script>

此代码所做的只是在重定向到下一页之前检查连接可用性。如果它检测到连接不可用，则它将视频播放设置为 0 并继续再次播放视频。然后它会在视频播放完成并且连接可用后重定向到下一页。

我认为这将解决有关丢失连接问题的问题，但不能解决连接超时问题。

如果发生连接超时，我仍然会遇到问题，我需要抓住遥控器在每台智能电视上再次刷新/重新打开网页。我目前共有 15 台智能电视 24/7 打开这些页面。

有谁知道我如何解决这个关于连接超时问题的问题？我试图在互联网上搜索，但我得到的只是检查连接丢失问题。我需要在重定向到下一页之前检查响应时间的东西，这样我就可以避免连接超时错误页面。如果响应时间过长，网页不会被重定向到下一个页面，而是会在响应时间不太长的情况下继续尝试并重定向到下一页，不会导致连接超时。

对不起我的英语。如果我的解释不完整，请发表评论...谢谢。

Answer 1

如果您使用的是 JQuery，您可以简单地触发一个超时的 AJAX 请求并捕获成功/错误。

<script>
function ping(){
   $.ajax({
      url: '/Slide/SlideshowLSI.aspx',
      timeout: 3000,
      success: function(result){
         window.location.href = '../Slide/SlideshowLSI.aspx';
      },
      error: function(result){
          this.currentTime = 0;
          this.play();
      }
   });
}

否则在纯 Javascript 中类似这样的东西应该可以工作：

<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', '/Slide/SlideshowLSI.aspx');
xhr.timeout = 4000; // Set timeout to 4 seconds
xhr.send(null);

xhr.ontimeout = function () {
    console.log("timed out");
}   

xhr.onreadystatechange = function () {
    var DONE = 4; // readyState 4 means the request is done.
    var OK = 200; // status 200 is a successful return.
    if (xhr.readyState === DONE) {
        if (xhr.status === OK)
            console.log(xhr.responseText); // 'This is the returned text.'
    } else {
        console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
}