javascript - 了解 JavaScript 中的自动页面刷新

Question

我试图理解这段代码:

function setIdle(cb, seconds) {
    var timer; 
    var interval = seconds * 1000;
    function refresh() {
            clearInterval(timer);
            timer = setTimeout(cb, interval);
    };
    $(document).on('keypress, click', refresh);
    refresh();
}

setIdle(function() {
    location.href = location.href;
}, 5);

setIdle 有两个参数。在其函数内部，它有一个函数 refresh，用于清除 Timeout 函数上的计时器。现在，每次发生事件(click、keypress)时，refresh() 都会被调用。

最后，这个函数被调用，传入另一个函数和 int 值 (5)，该值稍后将成为计时器的秒数。在稍后通过 cb 表示的其他函数中，页面将被刷新 (location.href = location.href;)。

这会导致每 5 秒自动刷新一次页面。

所以现在我不明白是否要添加一个附加功能:

setIdle(function() {
        console.log('hi');
    }, 1);

为什么第二个函数只调用一次，而不是像另一个函数那样每秒调用一次？

Answer 1

setIdle 不会每 5 秒运行一次回调函数。它会在您调用 setIdle 5 秒后运行一次，如果您键入或单击某些内容，超时将再次推迟。因此，当您闲置 5 秒时，它会运行一次。

页面每5秒刷新一次的原因是因为回调函数会重新加载页面，而重新加载页面会再次运行页面中的所有Javascript，从而再次调用setIdle()。

但是您第二次使用 setIdle 不会重新加载页面，因此它只记录 hi 一次。

如果您想每 N 秒重复执行某件事，请使用 setInterval 而不是 setTimeout。

顺便说一句，clearInterval 应该是 clearTimeout。在大多数浏览器中，它们目前是可以互换的，但不能保证。请参阅Are clearTimeout and clearInterval the same?