javascript - 別のタブを開くと、JQueryプログレスバーがアニメーションを停止します

Question

div内のデータ処理中にプログレスバーをアニメーション化する機能があります。プログレスバーの div は dataprocess.php(親ページ) にあり、処理は page generate.php を呼び出す iframe 内で行われます。dataprocess.php の進行状況バー関数は次のようになります:-

function progressBar(percent, element)
{
    var progressBarWidth = percent * ($(element).width()) / 100;
    progressBarWidth = progressBarWidth-10;
    $(element).find('div').animate({ width: progressBarWidth }, 5).html(percent + "% ");
}

dataprocess.php ページの div:-
<div id="progressBar" class="default"><div></div></div>

generate.php(iframe) 内の while ループで、以下のように PHP 関数を呼び出して、親の進行状況バーをアニメーション化します:-

function progress($percent)
{
    echo '<script type="text/javascript">
          parent.progressBar('.$percent.', "#progressBar");
          </script>';
}

プログレス バーは正常に動作していますが、ブラウザに複数のタブがある場合に問題が発生します。タブ 1 でデータ処理を行います。このプロセスには約 10 ～ 15 分かかります。進行状況バーが 25% で、別のタブに移動することにしたとしましょう。これは、タブ 1 がおそらくアイドル状態であると言えることを意味します。しばらくして、タブ 1 に戻ります。パーセントが 100% を示しているのがわかりますが、プログレス バーは 25% から 100% までアニメーションを続けます。プロセスは既に完了していますが、別のタブに移動すると進行状況バーのアニメーションが停止し、データ処理タブに戻ったときにのみ元に戻ります。

ありがとう。