Turbolinks 5 和 setInterval 问题

Question

我正在使用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 之类的解决方案。

Answer 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);