Web開発に限らずプログラミングで厄介なこと・・・それは無限ループです。

一度ループしだすと止まらないし、フリーズの原因にもなるから面倒なものなんですよね。

特にWeb開発だとJavaScriptを使うことが多いのでそこで無限ループが起きやすいです。

ということでその無限ループがブラウザで起きた時の対処法を紹介

無限ループが起こる原因

無限ループが起きてしまう原因もいろいろあって代表的なのが次のようなこと

• whileやforループ内での間違った終了条件
• そもそもループ内で終了条件が指定していない
• 同じイベントが何度も再帰的に呼び出される

こういう原因で無限ループしてしまうのはJavaScriptでも同じです。

それでJavaScriptで無限ループが起きてしまうと次の点で困ります。

• ブラウザがフリーズする
• ページを閉じようと思っても閉じれない
• 最悪PCとかを再起動しないといけない

さすがに最後の再起動は中々ないですが、ブラウザがフリーズするのは開発しててよくあります。

ブラウザで無限ループを止めるには

未処理の例外をスロー

ブラウザで無限ループを止めるには

ブラウザで無限ループを止める方法ですが簡単です。

ただしChromeブラウザを使っていることが条件です。

①Chromeで  Shift  +  Esc  キーを同時押し

そうすると次のようなタスクマネージャが出てきます。

②閉じたいプロセスを選んで “プロセスの終了” ボタンを押す

これだけでブラウザ全体を終了せずに特定のページだけ終了できます。

Javascriptなどを停止させる方法

while(1) {
  console.log(1);
}

のようにループしてしまった場合はページ全体が固まったようになってしまい、タブを強制的に閉じるしかないと思います。

デバッグの時に使えるか分かりませんが、whileループ処理を書くにはsetIntervalを使うといいと思います。

JavaScriptにはsleep関数がないので、setIntervalを使い、以下のように0.1秒おきに繰り返す処理を書くとsleep関数と同等に書けます。この場合は負荷が高くありません。

setInterval(function() {
    console.log(1);
}, 100);

ちなみにsetIntervalの戻り値をclearIntervalすることで繰り返しを止めることも出来ます。

var count = 0;
var interval_id = setInterval(function() {
    console.log(count++);
    if(count > 10) {
      clearInterval(interval_id);
    }
}, 100);

まとめ

ブラウザでの無限ループの対処法でした。