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

Turbolinks 5和setInterval问题

1 个答案: