SetTimeout 的奇怪行为

Question

我试图每 20 秒用 JavaScript 刷新一个 div。 这是我的代码：

$(document).ready(function(){
    refreshTable();
    updateTable();
});

function updateTable(){
    setTimeout( refreshTable, 20000);
    updateTable();
}

function refreshTable(){
    $('#table_list').load('table')
}

一旦页面准备好，我就可以开始倒计时了。 但是这段代码每 3 秒更新一次表。 有人能帮我吗？ 我究竟做错了什么？

Ps：我在这里看到这是一个常见问题，但是我看到的任何问题都可以帮助我。

Answer 1

你有无限递归：

function updateTable(){
    setTimeout( refreshTable, 20000);
    updateTable(); // Infinite recursion.
}

您应该使用 setIinterval 而不是进行 setTimeout 循环。

Answer 2

当文档准备好时，您调用updateTable 。

20秒后，它会调用refreshTable但它会立即调用updateTable一次。 所以排队的另一个refreshTable ，然后点击updateTable一次。 这使它陷入无限循环……或者至少进入堆栈溢出。

您需要：

• 呼叫updateTable从内refreshTable而不是updateTable
• 在ready处理程序中使用setInterval而不是使用setTimeout

Answer 3

正如其他答案所指出的那样，您的 updateTable 函数中有无限递归。 您可以改为使用 setInterval，它会定期运行指定的 refreshTable 函数：

$(document).ready(function(){
  refreshTable();
  setInterval(refreshTable, 2000)
});

function refreshTable(){
  $('#table_list').load('table')
}

Answer 4

$(document).ready(function(){
    window.setInterval( function(){
        $('#table_list').load('table');
    }, 20000);
});

这可能会帮助你，至少我希望如此：D

Answer 5

我建议您使用 jQuery 方法“.load()”的“完整”回调

$(document).ready(function(){
    refreshTable();
});

function refreshTable(){
    $('#table_list').load('table', function(){
        setTimeout( refreshTable, 20000);
    });
}

因此，将在执行查询处理和 HTML 插入后执行 setTimeout。 请注意，我们不再需要“updateTable”辅助函数，因为我们现在递归调用“refreshTable”函数。