タイマーの制御が効かない,Turbolinksの影響？

Question

お世話になります。
Rails によるwebアプリケーションの開発を行っております。
現在HomepageにてJavaScriptによるimage5枚のスライドを作成中です。

他のリンクよりHomepageに飛んでくると、画像表示のスライドが速くなってしまいます。

  $(document).ready(function() {
    if (window.name != "reloaded") {
      location.reload();
      window.name = "reloaded";
    } else {
      window.name = "";
    }
  });

こちらを下記に記述すると解決するのですが根本的な解決になっておらず、また問題もある為下記のコードを見直しています。

以下JavaScriptのコードです。

$(function () {

  let slideCurrent = 0; // スライド現在値, 1枚目のスライド番号
  let lastCurrent = $('.slide-list').length - 1; // スライドの合計数＝最後のスライド番号

  $('.slide-list').css('display', 'none'); // 先にすべてのスライドを非表示
  $('.slide-list').eq(slideCurrent).css('display', 'block'); // 最初のスライドを表示

  // スライドの切り替わりをchangeSlideとして定義
  function changeSlide() {
    $('.slide-list').fadeOut(1000); // 現在のスライドフェードアウト
    $('.slide-list').eq(slideCurrent).fadeIn(1500); // 次のスライドをフェードイン
  };

  // 一定時間毎に処理実行するstartTimerを定義
  function startTimer() {
    Timer = setInterval(function () {
      if (slideCurrent === lastCurrent) { // 現在のスライドが最終スライドの場合
        slideCurrent = 0;
        changeSlide(); // スライド初期値の値を代入して関数実行（初めのスライドに戻す）
      } else {
        slideCurrent++;
        changeSlide(); // そうでなければスライド番号を増やして次のスライドに切り替え
      };
    }, 3000); // 実行スパン3秒
  }

  // startTimer関数を止めるstopTimerを定義
  function stopTimer() {
    clearInterval(Timer); // setIntervalで設定したタイマーの取り消し
  }

  startTimer();
});

以下html, cssです。

<!-- html -->
<div class="first-view">
  <%= link_to "about", pages_about_path, class: "about-link" %>
  <ul class="slide-area">
    <li class="slide-list"></li>
    <li class="slide-list"></li>
    <li class="slide-list"></li>
    <li class="slide-list"></li>
    <li class="slide-list"></li>
  </ul>
</div>

<!-- css -->
.slide-area {
  width: 100%;
  height: 1130px;
  position: relative;
  max-width: 1550px;
  margin: 0 auto;
}

.slide-list {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}

.slide-list:nth-child(1) {
  background-image: url("slide_1.jpg");
}

.slide-list:nth-child(2) {
  background-image: url("slide_2.jpg");
}

.slide-list:nth-child(3) {
  background-image: url("slide_3.jpg");
}

.slide-list:nth-child(4) {
  background-image: url("slide_4.jpg");
}

.slide-list:nth-child(5) {
  background-image: url("slide_5.jpg");
}

JavaScript初学者でして原因を突き止めきれません。
アドバイス頂けましたら幸いです。
よろしくお願い申し上げます。

Comments

[m.ts10806]

>他のリンクよりHomepageに飛んでくると

そのスライドのある画面の初期表示と
画面をリロードした際はどうなっているのでしょう
あと「速くなっている」とのことですが、計測はされましたか？
単に錯覚でそう感じるだけでかわってないのかもしれません。

[Lhankor_Mhy]

HTMLをご提示ください。

[sosososo]

m.ts10806様ありがとうございます。
検証すると、リロードすると正常に動き、homeへのリンクを押し、2回目にhomeページへ訪れると、タイマーが2つ起動し重複してしまっていると思われます。
速くはなっておりませんでした。
大変失礼いたしました。

[sosososo]

Lhankor_Mhy様失礼いたしました。
html, css追記いたしました。

[Lhankor_Mhy]

ご対応ありがとうございます。

ご提示のコードを試してみましたが、別サイトからページ移動をしてもスライダーの時間が短くなることはなく、問題が再現しませんでした。

おそらく、ご提示の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。

問題再現の手順をもう少し詳しく書いていただけますか？
一番手っ取り早いのは、問題が起きるページをアップロードしてURLを示していただくことかと思います。

[Lhankor_Mhy]

コメントを拝読しました。

コードを見ると Rails っぽい感じですが、いかがですか？

もし、Rails でしたら、Turbolinks の影響であるかもしれません。
Rails に詳しい方に回答をしていただいた方がいいと思いますので、質問タグに Rails タグを追加することをおすすめします。

[sosososo]

Lhankor_Mhy様ありがとうございます。
おっしゃる通りrailsです。
Turbolinksの影響の可能性があるのですね！
かしこまりました。
タグにRailsを追加いたします！

Answer 1

回答有難うございました。
おっしゃる通りturbolinks設定をすると解決しました。
turbolinksとJSの関係もっと勉強していきます。
回答くださり有難うございます！

Answer 2

• Rails6で、Turbolinks有効
• JavaScriptのコードが問題ない

という前提であればJavaScriptのコードを下記で囲ってください。

document.addEventListener("turbolinks:load", function() {
  // ...
})

Rails7のTurboならこちら

document.addEventListener("turbo:load", function () {
  // ...
})

参考：https://qiita.com/saboyutaka/items/bb089e8208239bf6fdc0#turbolinks%E3%82%92%E7%B5%84%E3%81%BF%E8%BE%BC%E3%82%80%E3%81%9F%E3%82%81%E3%81%AB%E3%81%AF