Turbolinks: Как остановить запуск функций, когда вы покидаете страницу?

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

1. При первом посещении страницы запускается функция goLoop.
2. Когда я перехожу по ссылке со страницы, функция запускается. Если бы я не использовал Turbolinks, этого бы не произошло.
3. Если я перейду по другой ссылке на страницу, функция снова сработает, поэтому теперь она запускается дважды.

Как я могу избежать этого, не отключая Turbolinks?

Answer 1

Используйте turbolinks:before-cache, чтобы сократить время ожидания, используя clearTimeout. Вам нужно будет сохранить ссылку на текущий идентификатор тайм-аута. Таким образом, ваше решение может выглядеть так:

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

Answer 2

Вы можете использовать PageVisibilityAPI , чтобы увидеть, активна текущая страница или нет.

, а для проблемы l oop необходимо проверить, существует она или нет, затем запустить функцию тайм-аута.