Turbolinks：离开页面时如何停止运行功能？答案

【问题标题】：Turbolinks: How to stop running functions when you leave the page?Turbolinks：离开页面时如何停止运行功能？
【发布时间】：2020-03-09 09:56:06
【问题描述】：

在我的 Rails 5.2.2 应用程序中，我使用的是Turbolinks。

我发现当我离开一个页面时，启动的功能会继续。

我在检查主体类的return 语句下组织了我的函数。在下面的示例中，如果主体类不是 foobar，则以下函数不会运行。

// assets/javascripts/pages/foobar.js

var goLoop;

$(document).on("turbolinks:load", function() {
  if (!$("body").hasClass("foobar")) {
    return;
  }
  return goLoop();
});

goLoop = function() {
  return setTimeout((function() {
    console.log("Hello");
    return goLoop();
  }), 1000);
};

第一次访问页面，触发goLoop函数。
当我点击远离页面的链接时，该函数运行。如果我没有使用 Turbolinks，就不会发生这种情况。
如果我点击另一个链接返回页面，该功能会再次触发，所以现在它会运行两次。

如何在不禁用 Turbolinks 的情况下避免这种情况？

【问题讨论】：

标签： javascript ruby-on-rails ruby-on-rails-5 turbolinks

【解决方案1】：

您可以使用PageVisibilityAPI 查看当前页面是否处于活动状态。

对于循环问题，你应该检查它是否存在然后运行超时功能。

【讨论】：

非常感谢您的回答。 PageVisibilityAPI 非常有趣，所以我实现了它。但我会把这个问题留得更久一些，因为我真正想要的是如何避免离开页面后运行的函数。
@JohnSmith1976 最好使用 setInterval 而不是两个嵌套超时，然后你应该监听 visibilitychange 然后你可以使用 clearInterval 函数停止循环

【解决方案2】：

使用turbolinks:before-cache 使用clearTimeout 来取消您的超时。您需要保留当前超时 ID 的引用。因此，您的解决方案可能如下所示：

var goLoop;
var timeout;

$(document).on("turbolinks:load", function() {
  if (!$("body").hasClass("foobar")) {
    return;
  }
  return goLoop();
});

goLoop = function() {
  return timeout = setTimeout((function() {
    console.log("Hello");
    return goLoop();
  }), 1000);
};

$(document).on("turbolinks:before-render", function() {
  clearTimeout(timeout);
});

【讨论】：