【JavaScript】特定の時間でのリロード処理について

Question

質問内容

JavaScriptを使用して、
特定の時間の範囲でリロードを行いたいのですが、リロードできたり・できなかったりします。
ソースコードは以下となるのですが、リロードできない理由が特定できずに困っております。
もし、おわかりのかたがいらっしゃいましたら、ご教示いただきたくよろしくお願いいたします。

該当のソースコード

TimerCount();

function TimerCount(){

  $.get("updatetime.txt", function (data){
  
            const dataArray = data.split(',');  // カンマで分割
            const upDateStart = new Date(parseInt(dataArray[0]), parseInt(dataArray[1]), parseInt(dataArray[2]), parseInt(dataArray[3]), parseInt(dataArray[4]),0, 0);
            const upDateEnd = new Date(parseInt(dataArray[0]), parseInt(dataArray[1]), parseInt(dataArray[2]), parseInt(dataArray[3]), parseInt(dataArray[4]),2, 0);
            const currentDate= new Date(Date.now() + ((new Date().getTimezoneOffset() + (9 * 60)) * 60 * 1000));
            
            if(currentDate.getTime() >= upDateStart.getTime() && currentDate.getTime() <= upDateEnd.getTime()) {
              window.location.reload();
            } 
        }
  );
   
	setTimeout("TimerCount()",1000);
}

■updatetime.txtの内容 ※日時は適宜変更しております。
2021,10,17,1,22

Comments

[m.ts10806]

１秒毎だと短すぎて非同期処理がおわるまえにファイルアクセスしようとしてたりするのでは。
もっと時間長くしてみては？

[G3hdi19kk]

ご連絡いただきありがとうございます。
試してみます。

[G3hdi19kk]

時間がを長くして試してみたのですが、リロードされないことがありました。
console.logで確認してみると、非同期処理自体が行われないときがあるのですが、
原因などおわかりになりますでしょうか。

Answer 1

当方の環境では問題が再現しませんでした。

想像ですが、なんとなくキャッシュの問題のような気もします。
Devtools でネットワークを見て、想定通りのレスポンスがあるか確かめてみてはどうでしょうか。
Cache-Control ヘッダは何が返ってきていますか？

Comments

[G3hdi19kk]

ご連絡いただきありがとうございます。
Cache-Controlは、"no-cache"となっております。

また、$.get内でconsole.logで1秒おきに日本時間が表示されるようにしているのですが、
04:12:56 ～ 04:13:06 までが表示されていないので、こちらの処理が行われていないように見えます。

現在の日本時間： Wed Nov 17 2021 04:12:54 GMT+0900 (日本標準時)
現在の日本時間： Wed Nov 17 2021 04:12:55 GMT+0900 (日本標準時)
現在の日本時間： Wed Nov 17 2021 04:13:07 GMT+0900 (日本標準時)

[Lhankor_Mhy]

とすると、コールバックが呼ばれていないのですから、読み込みが失敗してそうですね。
catchなどで拾ってみるとどうでしょうか。

[G3hdi19kk]

ご返信いただきありがとうございます。
試してみます。

[G3hdi19kk]

try～catchで試してみたのですが読み込みが失敗していることはございませんでした。
console.logで確認してみると、非同期処理自体が行われないときがあるのですが、
原因などおわかりになりますでしょうか。

[Lhankor_Mhy]

try～catch では通信エラーを補足できないのではないありませんでしたか？　catch() メソッドではどうでしょうか。
また、回答にも書きましたが、ネットワークタブで通信を見るとレスポンスはどうなっていますか？

[G3hdi19kk]

ご連絡いただきありがとうございます。
catchメソッドを入れてみましたが、こちらに処理が入りませんでした。
また、レスポンスはステータスコード：200になっております。

[Lhankor_Mhy]

$.get内でconsole.log と ネットワークタブでのレスポンスは整合するということでいいですか？
また、レスポンスされた日付等のデータも想定の通りの内容になっているという理解で合っていますか？

だとすると、TimerCount() が呼ばれていないという可能性もあるかと思いますが、それは確認されましたか？

[G3hdi19kk]

◆下記については確認済みです。
>$.get内でconsole.log と ネットワークタブでのレスポンスは整合するということでいいですか？
>また、レスポンスされた日付等のデータも想定の通りの内容になっているという理解で合っていますか？
>だとすると、TimerCount() が呼ばれていないという可能性もあるかと思いますが、それは確認されましたか？

◆$.get内に現在の時刻を表示するlogを入れており、
　想定では1秒おきの時間がされるはずなのですが、以下のように2秒で表示されることがあるようです。
　00:46:00にリロードしたいのに、00:46:00には$.getの処理が行われないためリロードされないこと　があるのかと考えております。

現在の時刻: Sat Nov 20 2021 00:45:50 GMT+0900 (日本標準時)
現在の時刻: Sat Nov 20 2021 00:45:52 GMT+0900 (日本標準時)
現在の時刻: Sat Nov 20 2021 00:45:53 GMT+0900 (日本標準時)
現在の時刻: Sat Nov 20 2021 00:45:55 GMT+0900 (日本標準時)
現在の時刻: Sat Nov 20 2021 00:45:57 GMT+0900 (日本標準時)
現在の時刻: Sat Nov 20 2021 00:45:59 GMT+0900 (日本標準時)

おそらく他の処理で時間がかかっている影響なのかと思いますが、TimerCount()の処理が遅延することを考慮したリロード処理を考える必要があるかと考えております。
(以下の条件分岐を見直す必要があるということです)

if(currentDate.getTime() >= upDateStart.getTime() && currentDate.getTime() <= upDateEnd.getTime()) {
window.location.reload();
}

よろしくお願いいたします。

[Lhankor_Mhy]

> 下記については確認済みです。

ということは、TimerCount() は1秒ごとに呼ばれているが、$.get のコールバックが1秒ごとに呼ばれていない、という理解で合っていますか？
つまり、リクエストは1秒ごとに発行されているが、レスポンスが1秒ごとには得られていない、という現象が起きている、ということでしょうか？

そうだとするならば、サーバや通信の問題のように思うのですが、違いますか？

[G3hdi19kk]

ご連絡ありがとうございます。

サーバーや通信の知識が乏しいので何とも言えないのですが、
プログラムを下記に書き換えて確認しようと考えております。

以前は、updatetitme.txtに記述した時間とjsから取得した時間が等しい場合に、リロードする処理としておりましたが、updatetitme.txtに記述した時間から1分未満の範囲で1回リロード処理をするようにしております。

let count = 0;
TimerCount();

function TimerCount(){

console.log("TimerCount");

$.ajax({
　url: 'updatetime.txt',
　type: 'POST',
　cache: false,
　dataType:'text'
　})
　.done(function(response) {
const dataArray = response.split(','); // カンマで分割

if(!isNaN(dataArray[0]) && !isNaN(dataArray[1]) && !isNaN(dataArray[2]) && !isNaN(dataArray[3]) && !isNaN(dataArray[4])) {
const upDateTimeStart = new Date(parseInt(dataArray[0]), parseInt(dataArray[1]), parseInt(dataArray[2]), parseInt(dataArray[3]), parseInt(dataArray[4]),0, 0);
const upDateTimeEnd = new Date(parseInt(dataArray[0]), parseInt(dataArray[1]), parseInt(dataArray[2]), parseInt(dataArray[3]), parseInt(dataArray[4]),59, 999);
const currentDate = new Date(Date.now() + ((new Date().getTimezoneOffset() + (9 * 60)) * 60 * 1000));

console.log("アップデート開始日時: " + upDateTimeStart);
console.log("アップデート終了日時: " + upDateTimeEnd);
console.log("現在の時刻: " + currentDate);

if(currentDate.getTime() >= upDateTimeStart.getTime() && currentDate.getTime() <= upDateTimeEnd.getTime()) {
if(count >= 60) {
window.location.reload();
console.log("reload");
}
}

}

　})

count++;
console.log("count: " + count);

setTimeout(TimerCount,1000);
}

よろしくお願いいたします。

[Lhankor_Mhy]

これはこれで連続リロードをしそうな気がしますね……

[G3hdi19kk]

ご連絡ありがとうございます。
試してみましたが、連続リロードは発生しておりません。

[Lhankor_Mhy]

ご解決されて何よりです。

自己解決の処理をお願いします。