jQuery: リダイレクトしたページで1.1秒後に1回だけ今いるページをリロードさせたい

Question

実現したいこと

リダイレクト後に一回だけリロードをしたい。

できたところ

リダイレクトしたい際にアラートが表示され、1秒後に消える処理まで実装することができたが、その後にリロードする処理が発火しなくて困っています。

    $(function(){
      setTimeout("$('.alert').fadeOut('slow')", 1000);
      setTimeout("$('.alert').reload()", 1100); 
    });

Comments

[yambejp]

リロードしたときは一度フェードアウト、
リロードでないときは２度フェードアウトするという仕様で良いですか？

[rails_ruby]

実装したいこととしては、投稿をポスト後にトップ画面にリダイレクトするようにしており、リダイレクトしたトップ画面で「投稿に成功しました」といるようなアラートが表示される使用になっています。
その際に、アラートが1秒後にフェードアウトするように実装しているのですが、アラートがフェードアウトした際に微妙な隙間が空いており、その隙間を手動でリロードすると治るので自動化したいしたいなという思いから質問させていただきました。
なので、１秒後にアラートが消えたのちに0.1秒後にリロードを一回だけさせたいなと考えています。

Answer 1

第1引数が関数になってないからではないかなと。
下記のように変更して試してみてください（未検証です。要は関数にしましょうということですね）。

$(function(){
    setTimeout(function() {
       $('.alert').fadeOut('slow');
    }, 1000);
    setTimeout(function() {
       location.reload();
    }, 1100);
});

ただ「リロード」であれば、リロード後にまた上記の処理が発生するので、
WebStorageにフラグ1つ持っておいて「1回目のアクセス」と「2回目以降のアクセス」を判定する処理は必要に思います。

Comments

[rails_ruby]

リロード処理については、たった今実装できたのですが、おっしゃる通り、ただリロードさせるとリロード後に再度リロードされてしまいます。
WebStorageについてあまりに詳しいくないのでどのように判定処理を行えば良いかご教示いただけないでしょうか？アドバイスだけでもいただけると幸いです。

[m.ts10806]

回答にリンクつけていますが、それを読まれたうえではどうでしょうか。
すごく簡単に説明すると「ブラウザにドメインごとにデータを保存する」機能です。

[rails_ruby]

何と無くイメージをつかめました。
var ABC = localStorage.getItem( "DATA" );
こんな感じにして、ifで判定してあげればできそうな気がしますが、リロードのタイミングでlovalstrageに追加する方法が思いつかないので色々と試してみます。

[m.ts10806]

※lovalstrage → localStorage

そうですね。フラグのような使い方をすると良いです。

＞リロードのタイミングでlovalstrageに追加する方法
リロード直前にsetItemすれば良いだけの話と思うのですが如何でしょうか。

あと・・・WebStorageにはlocalStorageとsessionStorageの2種類があります。
もし「半永久的に」としたいのでしたら明示的に削除しないと残り続けるlocalStorageを使い、
「ブラウザが閉じられるまでの間」としたいのでしたらsessionStorageを採用します。

Answer 2

イマイチ仕様が理解できないのですが

• alertが表示されて1秒後にフェードアウト
• 0.1秒後に１回だけリロードする

を実現するならこんな感じ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var flg=window.performance.navigation.type;
$(window).on('pageshow', function(){
  $('.alert').show().delay(1000).fadeOut('slow').delay(100).queue(function(){
    if(flg==0){
      flg=2;
      location.reload();
    }
    $(this).dequeue();
  });
});
</script>
<div class="alert">alert</div>
test

でも、この仕様は当然２回フェードアウトが発生しますが意図がよくわかりません

Comments

[rails_ruby]

ご教示いただきありがとうございます。
おっしゃる通り、仕様としてはおかしいのですが一時的に退避方法としてご質問させていただきました。
そのため、今後練習開発を進めていく中で解決方法を探っていきたいと思います。

Answer 3

javascriptにあるlocation.reload() を使うのはどうでしょう？
// 1.1秒に一回リロード
setTimeout("location.reload()",1100);

Comments

[miyabi_pudding]

それだと、リダイレクト後に、”一回だけリロード”の要件が満たせません。
それだと、ページアクセス毎に、1.1秒後にリロードを繰り返してしまいます。

[Kazuyuki-T0806]

その通りですね
mts10806の回答が適切だと思うのでこちらは削除申請を致します