iOS端末にてイベント中に他のページへ移動→ブラウザバックをするとイベントが継続して実行されてしまう

Question

該当のソースコード

対象のリンクを踏んだ場合にpreventDefaultで挙動を制御し
setTimeoutで遅延処理を行ってからページを遷移させるというものとなります。

<a href="/example.html">サンプル</a>
<a href="/hoge.html" class="ta">ほげ</a>
<a href="/fuga.html" class="ta">ふが</a>

const links = document.getElementsByClassName('ta');
for(let i = 0; i < links.length; i++) {
  links[i].addEventListener('click', function(event){
    event.preventDefault();
    function delay(){
      window.location.href = links[i].href;
    }
    setTimeout(delay, 10*1000);
  });
};

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

iPhoneを使用して挙動を検証した場合に

1. 対象のリンクを踏む
2. イベント処理が完了し切る前に別のリンクを踏む
3. ページ遷移後にブラウザバック

という動作を行うと、ブラウザバック後もイベントが中断されておらず再びイベントの内容に従ってページが遷移されてしまいます。

前提・実現したいこと

イベント発火中、自ら他のページにアクセスをした場合にイベントを中断させ、ブラウザバックをした場合でも処理が継続して実行されない様にするにはどうすると良いのでしょうか？

試したこと

例えば掲示したコードでは10秒待ったあとにページが遷移するものとなっておりますが対象リンクを踏み、5秒後に別ページへとアクセスをし、ブラウザバックをすると再び残る5秒を待機した後にページが遷移されてしまいます。

Android端末のブラウザやwindowsにおけるブラウザでは同様の症状は現れませんでした。

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

該当のテスト環境はiOS14.6　
症状が確認出来たブラウザはChrome,safari
(その他のブラウザでは検証しておりません)

Answer 1

OS毎によるブラウザバック時の挙動の違いによって原因が生まれていた模様でした。

• Android→リロード
• iOS→キャッシュの読み込み

以上から、キャッシュの読み込みを行わせるのではなく
以下のコードの様にページをリロードさせる事で実行したイベントは破棄され思った通りの動きを再現出来ました。

window.onpageshow = function(event) {
    if (event.persisted) {
         window.location.reload();
     }
};