setTimeoutの呼び出し時間が異様に長い

Question

発生している問題

普段は普通に動くが、
たまに、ある箇所のsetTimeoutの呼び出し時間が異様に長くなる。
また、他の処理は普通に動く。

該当のソースコード

count=0;
function reload(charactor){
   console.log("1");
   count++;

   //処理省略

   //reloadを呼び出し
   console.log("2");
   myTimer=setTimeout("reload("+charactor+")",40);

   if(count==text[serifukaisu].length){
      clearTimeout(myTimer);
      count=0;
      serifukaisu++;
   }
   console.log("3");
}

---追記　余計な情報も多いのですが、コードを丸々コピペしました。

var serifutemp=document.getElementById('pan2serifu').textContent;
var text=serifutemp.split(",");

function reload(charactor){
　　console.log("1");
    count++;
    //要素ノードオブジェクト
    if(charactor===1){
    	$('#novelsakujo').attr('id',"novel");
    	var novel=document.getElementById('novel');
		$('#novel2').attr('id',"novelsakujo2");
    	$('#nareta').attr('id',"naretasakujo");
    }else if(charactor===2){
    	$('#novelsakujo2').attr('id',"novel2");
    	var novel=document.getElementById('novel2');
    	$('#novel').attr('id',"novelsakujo");
    	$('#nareta').attr('id',"naretasakujo");
    }else if(charactor===3){
    	$('#naretasakujo').attr('id',"nareta");
    	var novel=document.getElementById('nareta');
    	$('#novel').attr('id',"novelsakujo");
    	$('#novel2').attr('id',"novelsakujo2");
    }

    if(skipflag==1){
    	clearTimeout(myTimer);
    	return 0;		
    }
    if(text[serifukaisu].substr(count-1,4)=="brbr"){
    	count=count+4;
    	novel.insertAdjacentHTML('beforeend','<br>');
    }
    if(text[serifukaisu].substr(count-1,2)=="#r"){
    	count=count+2;
        var element = document.createElement('span');
        element.setAttribute('class', 'red');
        element.innerHTML = text[serifukaisu].substr(count-1,1);
    	novel.appendChild(element);
    }else if(text[serifukaisu].substr(count-1,2)=="&b"){
    	count=count+2;
        var element = document.createElement('span');
        element.setAttribute('class', 'f34pt');
        element.innerHTML = text[serifukaisu].substr(count-1,1);
    	novel.appendChild(element);
    }else if(charactor===2||charactor===3){
    	var texttemp=text[serifukaisu].substr(0,text[serifukaisu].length-2);
    	var textNode=document.createTextNode(texttemp.substr(count-1,1));
    	novel.appendChild(textNode);
    }else{
    	var textNode=document.createTextNode(text[serifukaisu].substr(count-1,1));
    	novel.appendChild(textNode);
    }
    console.log("2");
    if(hayoflag===0){
      myTimer=setTimeout("reload("+charactor+")",40);
    }else{//メッセージ表示中にエンターを押した場合表示速度を早くする
      myTimer=setTimeout("reload("+charactor+")",0);
    }
    if(count==text[serifukaisu].length){
      clearTimeout(myTimer);
      count=0;
      serifukaisu++;
    }
    console.log("3");
}

試したこと

ログの期待値は
123123123...と短時間で続くこと。
しかし、123は一瞬で表示されるが、次の1が表示されるまで、2秒近くかかる。

また、ブラウザをスーパーリロードしても現象は直らないが、
ブラウザを再起動すると直る。
しかし、何日かするとまた同じ現象が発生する。

ちょっとまじでわからないので、可能性だけでも示唆してもらえるとありがたいです。
よろしくお願いします。

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

使用ブラウザ：Google chrome(84.0.4147.105)
OS: windows10

Comments

[Yasumichi]

再帰で書いているのでメモリをどんどん、消費して、ブラウザーの処理が重くなるとかではないですかね？メモリ監視をしてみると良いかもしれません。

はずしてたらごめんなさい。

[pan2taicho]

すみません、再起は数回で抜ける処理になってます
メモリも問題なし、またChromeのperformanceで見たときに、jsは問題なしでidleの時間だけが長いという状況です

[miyabi_pudding]

再帰をやめて、setIntervalを使うべきだと思います。
一定時間で繰り返しは、setTimeoutでやるべきではありません。
（制御できないタイマーが増え続ける可能性がある）

[m.ts10806]

「charactor」には何を与えているのでしょう。文字列だと動かないですよね。

[m.ts10806]

textという変数もそうですね。せめてコピペで動作確認できる情報をください

[pan2taicho]

ソースコードをコピペしてきました。charactorには1か2か3が入ってます。

setIntervalに修正して試してみます。
ありがとうございますm(_ _)m

Answer 1

なぜ重くなっているか、
無限ループが発生しているからです。

下記構文を実行してみてください。

count=0;
serifukaisu=0;
function reload(charactor){
   // console.log("1");
   count++;

   //処理省略

   //reloadを呼び出し
   // console.log("2");
   myTimer=setTimeout("reload("+charactor+")",40);

   console.log("set:", myTimer);

   if(count==100){
      console.log("clear:", myTimer);
      clearTimeout(myTimer);
      count=0;
      serifukaisu++;
   }
   // console.log("3");
}

reload(count);

セットが大量に発生しており、
クリアは、その場でのタイマーにしかクリアを適用できていなく、
使徒不明のタイマーIDが大量発生しているのがわかるかと思います。
（不明変数は固定値に置き換えてます）

設計から見直すべきで、
タイマーは外側スコープに一個、（つまり、letで定義し、スコープを明確にする）、
setIntervalを使うべきです。

Comments

[m.ts10806]

40ミリ秒 なんて一瞬レベルしか待たせないなら普通に自身呼び出してreturnさせたほうがいいのではと思ってみたり。

[miyabi_pudding]

ですね。
して、再帰の基本はそれですよね。
setTimeoutを使った意図があるかもですが、これ以上は聞いてみないと答えようがないですね　汗

[pan2taicho]

おかげさまで解決しました、ありがとうございましたm(_ _)m
ノベルゲーム風に文字を一文字一文字表示させるというコードなので、40という短い時間に設定していました。

Answer 2

皆さま、ご回答ありがとうございましたm(_ _)m
setIntervalで解決しました。