Question

在我的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的情况下避免这种情况？

Answer 1

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

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

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

Turbolinks：离开页面后如何停止运行功能？

2 个答案: