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 发生了变化。特别是，所有 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);