1

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

4

1 回答 1

8

也许我找到了解决方案。在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);
于 2019-02-22T14:38:29.050 回答