Turbolinks 5 和 setInterval 问题

Posted 2023-05-09

【中文标题】Turbolinks 5 和 setInterval 问题

【英文标题】：Turbolinks 5 and setInterval issue

【发布时间】：2019-07-15 07:17:18

【问题描述】：

我正在使用Turbolinks 5 和Rails 5，并且我设置了一个 JS 间隔，以便通过 AJAX 每 10 秒刷新一次页面内容：

<script type="text/javascript">
  $(document).ready(function() 
    function fetchContent() 
      // some AJAX request
    

    setInterval(fetchContent, 10000);
  );
</script>

当我第一次加载包含上述代码的页面时，它可以工作：fetchContent 每 10 秒触发一次。

但是，当我导航到另一个页面时，fetchContent 一直在触发。此外，当我返回页面（使用浏览器后退按钮）时，fetchContent 会意外触发多次。显然，这不是我们想要的行为。

如何解决这个问题？

---

注意：要解决这个问题，我知道我可能需要某种形式的 clearInterval 调用，但我应该如何使用 Turbolinks 5 来实现它，例如我应该绑定什么事件？从 Turbolinks 5 开始，API has changed。特别是，所有 Turbolinks Classic 事件都已重命名，包括 page:update 在内的一些事件已被删除，因此我无法使用 this、this 或 this 之类的解决方案。

【参考方案1】：

也许我找到了解决办法。在application.js 我说：

function setIntervalWithTurbolinks(intervalFunction, milliseconds) 
  var interval = setInterval(intervalFunction, milliseconds);

  $(document).on('turbolinks:before-cache turbolinks:before-render', function() 
    clearTimeout(interval);
  );

所以，在我的应用程序中，我是这样使用它的：

setIntervalWithTurbolinks(fetchContent, 10000);

【讨论】：

使用 one 调用一次 - 否则您将不断为无效 id 调用 clearTimeout，可能会从另一段代码意外取消另一个间隔