SetTimeout 不同步时如何同步？答案

【问题标题】：How to sync SetTimeout when it goes out of sync?SetTimeout 不同步时如何同步？
【发布时间】：2021-11-08 06:50:09
【问题描述】：

我有一些代码在setTimeout 函数中指定了几秒钟的循环和中断，然后在延迟结束后再次循环代码。我面临的问题是，当页面失去焦点一段时间后，超时会不同步，并且代码会以“随机”间隔循环，而不是setTimeout 延迟中指定的间隔。

这是当前代码供参考：

$(document).ready(function () {
    for (var key in keys) {
        element = key;
        val = keys[key];
        test(element, val);
        (function loop(element, val) {
            setTimeout(function () {
                test(element, val);
                loop(element, val);
            }, 5000);
        })(element, val);
    }
});

我已经搜索了一下，问题似乎是意料之中的，我正在尝试找到理想的解决方法，到目前为止，我采用了更简单的方法，即在页面丢失时重新加载整个页面，然后重新集中注意力。它有效，但我对此并不满意。

这是当前的解决方法：

$(window).blur(function(){
    $(window).focus(function(){
        location.reload();
    });
});

我还阅读了有关将clearTimeout 与focus 一起使用以尝试重新启动或同步超时但在多次尝试中我无法使某些东西正常工作的信息。充其量它仍然会以某种形式使超时失控。

我不知道该采取哪个方向才能获得比刷新网页更合适的方法。

提前感谢您的任何建议。

【问题讨论】：

标签： javascript jquery settimeout

【解决方案1】：

我认为这不会是性能最好的解决方案。

但您可以设置截止日期。使用setInterval 每秒检查是否已到最后期限。

const finish = Date.now() + 10e3;

function test(timeout) {
  console.log('Start: ', new Date().toGMTString());

  let timer = setInterval(() => {
    if (Date.now() >= timeout) {
      console.log('Finished: ', new Date(timeout).toGMTString());
      clearInterval(timer);
    }
  }, 1000);
}

test(finish);

【讨论】：

不确定我是否正确应用了这个，但它以类似的方式结束了不同步。循环之间的时间中断/不同步。循环开始在它们之间获得 1 的间隙，而不是连续运行。就像循环所有键需要 10 秒而不是 1/2 秒。
您是否尝试将1000ms 的间隔减小到更小？也许像500ms 或100ms。这应该有助于间隔检查何时不同步。
不，我没有测试更短的间隔。无论如何，我很感激你的建议。现在我将使用我发布的解决方法，它在我的用例中非常适合，因为当用户不“看”时我不需要运行该功能。

【解决方案2】：

我在另一个问题中找到了适合我的用例的合适答案。

这个建议很简单：当标签页/页面没有聚焦时，或者更准确地说，当它对用户隐藏时，避免运行依赖于定时或节流函数的代码：

if (!document.hidden){ //your animation code here }

来源：https://stackoverflow.com/a/53944438/924855

虽然我的问题与动画无关，但是当页面不在视图中时，有一个共同点是受到setTimeout 的限制。使用这种方法，我避免在页面不可见时完全运行代码，并且完全避免去同步，如下所示：

$(document).ready(function () {
    for (var key in keys) {
        element = key;
        val = keys[key];
        test(element, val);
        (function loop(element, val) {
            setTimeout(function () {
                if (!document.hidden) {
                    test(element, val);
                }
                loop(element, val);
            }, 5000);
        })(element, val);
    }
});

【讨论】：