奇怪的 setTimeout 行为 Javascript答案

【问题标题】：Strange setTimeout behaviour Javascript奇怪的 setTimeout 行为 Javascript
【发布时间】：2013-10-09 20:07:24
【问题描述】：

以下脚本应该执行以下操作：

在页面加载时，它会设置 20 秒的超时时间，然后所需的内容将在 ajax 调用中自动更新。如果用户点击一个显示 RELOAD 的按钮，它将调用函数reloadContent()，从而清除超时并再次设置。

所以基本上，如果用户手动重新加载，它应该重新启动超时，以避免调用太接近。

它工作了一半，因为计时器似乎被重置了，但是reloadContentTimeout() 将在手动加载动作的 10 秒后执行，这是超时时间的一半。

我做错了吗？

谢谢！

  /**
   *  Reload content
   */
  function reloadContent(elementId) {
    $(elementId).load(window.location.href+' '+elementId+' > *');
    clearTimeout(timeoutId);
    reloadContentTimeout(false);
  }

  /**
   * Reload content every X seconds (20)
   */
  var timeoutId;
  function reloadContentTimeout(now)
  {
    now = (typeof now === 'undefined' ? true : now);
    if( now ) {
      reloadContent('#table-content');
    }
    timeoutId = setTimeout(reloadContentTimeout, 1000 * 20);
  }
  reloadContentTimeout(false);

【问题讨论】：

标签： javascript ajax settimeout

【解决方案1】：

因为您调用reloadContentTimeout 两次，这将重新分配timeoutId。其中一个 ID 没有被清除，并且事件的触发频率超出了应有的频率。让我们稍微展开你的调用堆栈：

if (now) {
    $(elementId).load();
    clearTimeout(timeoutId);
    // this reassigns timeoutId
    reloadContentTimeout(false)
}
// this is where timeoutId is assigned.  It gets assigned
// by this call, but also the call above.
timeoutId = setTimeout(reloadContentTimeout, 1000 * 20);

我会切入正题：这会解决问题。

if (now) {
    /* snip */
}
else {
    timeoutId = /* snip */
}

【讨论】：

确实，我已经完成了 console.log 并看到它创建了 2 个超时，并且只清除了最后一个。把else 解决了。谢谢！

【解决方案2】：

请检查您的通话顺序

每次调用 reloadContentTimeout 都会开始一个新的超时（对于可能的参数值“undefined”和“false”）
20 秒后您重新加载内容，这将在清除旧的超时后开始新的超时（这非常没用，因为计时器已经触发）。然后您开始另一个超时并重新分配 timeoutId 而不清除您之前创建的超时。现在你有两个超时运行，每次超时结束后都会持续发生

检查@Explosion Pills 的答案。它会帮助你解决问题

【讨论】：

谢谢，如果 reloadContent 是手动触发的（通过按下 Reload 按钮），清除超时会有效果。