ページ遷移でカウントダウンを引き継ぎたい

前提・実現したいこと

jQueryでページを遷移してもカウントを引き継げるカウントダウンタイマーを作成しています。
以下のような流れをイメージしているのですがうまく動きません。

(1)ページ読み込み時に、現在時刻に1分を加算した値をクッキーに保存＝これを終了時刻とする
(2)setIntervalで毎秒現在時刻を取得し、(1)の終了時刻との差から残り時間を算出しタイマー表示
(3)残り時間がゼロになったら、タイマー部分を「GAME OVER」という表示に切り替える
-----ここからうまく動きません-----
(4)ページのリロードやサイト内でのページ遷移があった場合、すでに保存されている(1)の終了時刻を呼び出し現在時刻と比較…以下同様の動作を実現したい

発生している問題・エラーメッセージ

・ページをリロードした場合、カウントが引き継がれず即「GAME OVER」となってしまう。

該当のソースコード

$(document).ready(function(){

    //終了時間をクッキーに保存
    if($.cookie('end')){
        var end = $.cookie('end');
        $('.end').text($.cookie('end'));
        timer();
    } else {
        var end = new Date();
        end.setMinutes(end.getMinutes() + 1);
        $.cookie('end', end);
        $('.end').text($.cookie('end'));
        timer();
    }
    
    //カウントダウン関数
    function timer(){
      
        //1秒ごとに実行
        setInterval(function(){
          
            //現在時刻を取得
            var now = new Date();
            $('.now').text(now);

            //終了時間と現在時間の差を求め、時分秒形式に変換
            var count = Math.floor((end - now) / 1000);

            //0より大きければカウントダウン続行、小さければ「GAME OVER」を表示
            if (count > 0) {
                var count = toHms(count);
                $('.count').text(count);
            } else {
                $('.count').text("GAME OVER");
            }

            //秒→時分秒への変換関数
            function toHms(t) {

                var hms = "";
                var h = count / 3600 | 0;
                var m = count % 3600 / 60 | 0;
                var s = count % 60;

                if (h != 0) {
                    hms = h + ":" + padZero(m) + ":" + padZero(s);
                } else if (m != 0) {
                    hms = m + ":" + padZero(s);
                } else {
                    hms = s;
                }

                return hms;

                function padZero(v) {
                    if (v < 10) {
                        return "0" + v;
                    } else {
                        return v;
                    }
                }
            }
        });
    }
});

試したこと

・setInterval内でクッキーから毎秒終了時刻の取得→結果変わらず
・「var count = Math.floor((end - now) / 1000);」の下でalertでcountの値を表示させると、リロード前は秒数が入るがリロード後は「NaN」となる（アラートでの確認箇所がここでよいのか不明）

jQueryもクッキーも初心者のため、様々なサイトからソースを切り貼りしてここまで来ており、これ以上何を試したらよいかわからない状態です。
解決策をご教授いただければ幸いです。
よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

ざっと見たかんじでしかないですが変数endがtimer()の外で定義されていてcountの計算するときに常にUndefined になってませんか？
console.logで確認してみてください。
varなど定義の際はなるべく変数のスコープに合わせて、今回はグローバルで定義された方が良いですね。

追記。
現在はcookieに保存するときにタイマーで回ったときの時間ではなく、アクセスしたときの時間を保管しています。
setInterval()では第1引数即時関数でそのままその内容のみを実行し続けますので、timer()に入る前に保管された情報は更新されません。
setInterval()内でnowをとってきたタイミングでendのcookieを保存するように変更してみてください。

投稿2018/11/23 00:20

編集2018/11/23 06:32