ブラウザが固まってしまう

ブラウザがフリーズします。その原因や理由を知りたいです。
また、何か記述等でアドバイスがあると幸いです。

下記のHTMLファイルを作成しました。(ソースをのせました。失礼しました。)

HTML
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
2  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4<head>
5    <title></title>
6    
7    <script language="javascript" type="text/javascript">
8        function OnButtonClick() {
9            var hoge = Sample_form.output.value;
10            target = document.getElementById("output");
11            var date = time();
12            target.insertAdjacentHTML('beforeend', date +'<br>'+ hoge + '<br>');
13
14        }
15        
16        function time(){
17        var now = new Date();
18        /*setInterval('time()',1000);*/
19        return now.toLocaleTimeString() +" " + now.toLocaleString();
20
21    }
22
23    </script>
24    
25</head>
26<body>
27<form name="Sample_form" action="">
28<p>かきこみ内容<br>
29<input type="text" name="output"></p>
30<input type="button" value="Exec" onclick="OnButtonClick()";/><br />
31</form>
32
33<div id="output"></div>
34<div id="br"></div>:
35    
36<h1>一番下</h1>
37
38</body>
39</html>

フォームに入力した情報はボタンを押すと、フォームの下に時刻とともに表示されます。
作成したHTMLファイルをブラウザで開き、ボタンを押して、しばらくするとフリーズしてしまいます。
どうやら、/setInterval('time()',1000);/が原因のようです。
なぜ、フリーズしてしまうのか、理由を知りたいです。
よろしくお願いいたします。

m.ts10806

2020/02/10 14:17

再現するコードをご提示ください。この内容だけでは何一つアドバイスに必要な情報がありません。

kei344

2020/02/10 14:19

書かれている状況が再現するコード（HTML/JavaScript）を質問文に追記されたほうが回答を得やすいと思います。

yuh_yo

2020/02/10 14:19

m.ts10806様、ありがとうございます。後程、自分で作成したHTMLファイルのソースを載せます。失礼しました。

yuh_yo

2020/02/10 14:20

kei344様、ありがとうございます。後程、自分で作成したHTMLファイルのソースを載せます。失礼しました.

kei344

2020/02/10 15:30

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

yuh_yo

2020/02/10 15:34

kei344様、ありがとうございます。このような便利な機能があるとは知りませんでした。大変勉強になります。

行動規範の内容に同意します

回答1件

ベストアンサー

どうやら、/setInterval('time()',1000);/が原因のようです。

なぜ、フリーズしてしまうのか、理由を知りたいです。

setIntervalは指定ミリ秒毎に関数を実行します。
0. クリックでtime()が実行される
0. その中でsetIntervalで毎秒time()を実行するように登録
0. 1秒後にまたsetIntervalで毎秒time()を実行するように登録
0. その1秒後にまたsetIntervalで毎秒time()を実行するように登録
0. （以下略）

1回だけならsetTimeoutを使えばよいです。
ちなみに、setTimeout( 'time()', 1000 )と登録するのではなく、setTimeout( time, 1000 )と登録しましょう。

【WindowOrWorkerGlobalScope.setTimeout() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout

投稿2020/02/10 15:37

kei344

総合スコア69398