Turbolinks 5 和 setInterval 问题

Question

我正在使用 Turbolinks 5 with 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. In particular, all of the Turbolinks Classic events have been renamed, and several—including page:update—have been removed, so I cannot use solutions like this, this or 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);

Turbolinks 5 和 setInterval 问题

Turbolinks 5 and setInterval issue

ruby-on-rails

setinterval

turbolinks

ruby-on-rails-5

turbolinks-5