[Rails,Javascript]RailsのviewでJavaScriptを用いて一定時間後に指定したページへ飛ぶ

チーム開発で活用した技術アウトプット投稿

目的

• 特定ページを訪れた際、一定時間後指定したページへリダイレクトする

開発環境

• Ruby 3.1.2
• Rails 6.1.7

基本的な書き方

指定したいページに下記scriptを記述

.js

<script>
  const action = function() {
    window.location.href = '/';
  }
  const time =  5*1000;
  setTimeout(action,time);
</script>

• action内のwindow.location.href = 'URL';で遷移先を指定
• time内の5*1000で秒数を指定(ミリ秒で指定する。1000 = 1秒)
• setTimeoutでtimeに指定した時間経過後にactionを実行

問題点

この記述をしたページから違うページに飛んだ場合でも実行されてしまう
※指摘してくれたチームメイトに感謝

例)Aboutページに指定している、指定先はトップページ、移動時間は５秒後とする

• Aboutページにアクセス
• 5秒以内に他のページ、例えば商品ページに移動
• ５秒立つとトップページに飛ばされてしまう

→つまりキャンセル処理が必要であるということ

キャンセル処理

setTimeoutのキャンセルにはclearTimeout()を使用する
今回はヘッダーにあるリンクを押して移動した場合はキャンセル処理を走らせたかったため以下の様に記述

.js

  const action = function() {
    window.location.href = '/';
  }
  const time =  5*1000;
  let timer = setTimeout(action,time);
  
 function stopTimer() {
   clearTimeout(timer);
  }

変更点

• 変数timerにsetTimeout処理を代入
• function stopTimer() {}にclearTimeout(timer);を指定
  そして押下時にキャンセル処理を走らせたい部分に追加の記述を行う

_header.html.erb

　　　　　　　〜略〜
<ul class="navbar-nav ml-auto">
  <li class="mr-2" onclick="stopTimer()">
    <%= link_to my_page_customers_path, class: 'nav-link text-dark btn btn-outline-secondary me-2' do %>
      マイページ
    <% end %>
   〜以下略〜

classで指定しているonclick="stopTimer()"が追加部分
onclickは押すことで指定している変数の内容を実行する、つまりstopTimer()が実行される
stopTimer()はclearTimeout(timer);の処理を指定しているので、リダイレクトがキャンセルされるという流れ

参考