javascript - jQuery .fadeIn() オーバーレイ (別のブラウザー タブを表示した後)

Question

背景にフェードインとフェードアウトする数字を表示するスクリプトを作成しました。(ある種のマトリックステーマ)

ページを離れて他のブラウザタブを表示するまで、すべてが正常に機能します。スクリプトを使用してタブに戻ると、数字 (フェードインおよびフェードアウト) がオーバーレイ/オーバーラップします。私が理解している限り、 setInterval() は、このタブが非アクティブであった期間に関数 codeGhost() の時間間隔をノックオフし始めます。

ユーザーが他のブラウザー タブからスクリプトを使用してページに戻った場合、この問題が発生しないように setInterval() と codeGhost() 関数を同期する方法はありますか?

よろしくお願いします。

var codeElement = 1;
function randomIntNum(){
    codeElement = Math.floor(Math.random()*10);
}
function getRandomInt(min, max){
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
$(document).ready(function(){
    function codeGhost(){ 
     $("#codeGhost").css({
        'top' : getRandomInt(0,400),
        'left': getRandomInt(0,900)
    });
        randomIntNum();
        $('#codeGhost').html(codeElement);
        $('#codeGhost').fadeIn( 2000, function(){ $('#codeGhost').fadeOut( 2000) });
    }
    setInterval(codeGhost, 4000);
})