Question

我有以下javascript。

function isOnline() {

var status = navigator.onLine ? 'online' : 'offline',
    indicator = document.getElementById('indicator'),
    current = indicator.textContent;

// only update if it has change
if (current != status) {

    // update DOM
    indicator.textContent = status;

    // trigger handler
    handler[status]();
};

if(current == 'offline')
{
  setInterval(checkServerStatus, 500)
  checkServerStatus();
 }
};




function checkServerStatus()
{
var img = document.createElement("img");
img.onload = function()
{
    alert('yey!');
    setInterval(isOnline, 500);
    isOnline();
};
img.onerror = function()
{
    alert('meh.')
};
img.src = "image-small.jpg";  //image on server(should be small so that intermittent checks are not bad)
}
$(checkServerStatus);

我想做的是以下内容。首先调用checkServerStatus（） - ＆gt;如果在线运行isOnline（）每500ms，以继续检查网站的状态。在我的isOnline代码中，如果我检查它是否处于脱机状态，则再次运行checkServerStatus，如果我仍然连接则返回。

另外，我想添加两件事，当checkServerStatus失败时，递归调用另一个函数isOnline2来检查它是否在线，然后我再次调用checkServerStatus。

我目前遇到的问题是checkServerStatus一直显示'yey'警告。我认为，该函数只启动一次，然后使用setInterval（isOnline，500）将继续运行。在isOnline更改为offline后，我将再次运行checkServerStatus函数。

关于如何调整这一点的任何想法都将非常感激。

Answer 1

将间隔设置为变量，然后在想要停止间隔时使用clearInterval（）。

var interval = setInterval();
clearInterval(interval);

Answer 2

setInterval()无休止地在一个间隔上运行一个函数，直到被clearInterval()取消。

在您的情况下，我实际上建议不要使用setInterval，而是使用setTimeout。这样可以更好地控制执行：setTimeout运行一次。在每个函数完成时，您应该根据需要调用setTimeout来调用checkServerStatus或isOnline。

function isOnline() {

    .....

    if(current == 'offline') {
        setTimeout(checkServerStatus, 500);
    } else {
        setTimeout(isOnline, 500);
    }
};

它还可以防止重叠：例如，如果checkServerStatus完成时间超过500毫秒，setInterval您将同时多次运行它。

在线状态的递归Javascript函数

2 个答案: