html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7</head>
8
9<body>
10  <button>sleep</button>
11  <script src="main.js"></script>
12</body>
13
14</html>

js
1// 引数で渡された時間 (ミリ秒) ループする
2const sleep = (ms) => {
3  const sleepStartTime = new Date();
4  while (new Date() - sleepStartTime < ms) { }
5};
6
7// ボタンがクリックされたとき、4000ミリ秒待機する
8const click = () => {
9  sleep(4000);
10};
11
12const button = document.querySelector("button");
13button.addEventListener("click", click);
14
15const startTime = new Date();
16setTimeout(() => console.log(new Date() - startTime), 2000);

リロード直後にボタンを押したとき、コンソールには4000前半の数字が出力されます。
このコードを書いたとき、
200ミリ秒でボタンを押す → 4000ミリ秒待機 → 残りの1800ミリ秒待機 → 6000が出力
となるのではないかと思っていました。これはsetTimeoutの仕様が原因ですか？

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

回答4件

ベストアンサー

200ミリ秒でボタンを押す → 4000ミリ秒待機 → 残りの1800ミリ秒待機 → 6000が出力となるのではないかと思っていました。

なりません。これには2つの要因があります。

setTimeoutは、「何ミリ秒後に動かす」というリストに登録する処理を行う、というイメージです。積極的に待ち続けるという処理を行うものではありません。
JavaScriptはシングルスレッドなので、while()で回し続けるようなビジーループをかけると、他のハンドラ類も一切動かなくなります。

ということで、タイムラインとしては以下のようになります。

0ミリ秒→setTimeoutでタイマーが登録される
200ミリ秒→ボタンを押してビジーループがスタート
2秒→setTimeoutのタイマーが時間を迎えるけど、ビジーループがまわり続けているので動作しない
4.2秒→ビジーループが終了したことで、ようやくsetTimeoutのハンドラが動作

投稿2024/07/05 05:54

maisumakun

総合スコア145932

maisumakun

2024/07/05 05:55

ビジーループをかけると、ブラウザ内の操作が一切反応しなくなります。実用サイトでやるべきではありません。

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

setTimeout() は、setTimeout() が呼ばれた後の指定ミリ秒後に指定コードを実行しようとします。そのタイミングでCPUが忙しければイベントループに戻った瞬間に実行されます。

質問者さんの想定のような挙動がほしいなら、setInterval() や requestAnimationFrame() が一定回数呼ばれたら処理をする、ということをする必要があります。

投稿2024/07/05 05:57

int32_t

総合スコア21601

非同期処理を同期したいならpromiseとの連携が必須です

html
1<script>
2const sleep = async(ms) => {
3  console.log(await new Promise(resolve=>setTimeout(()=>resolve('done'),ms)));
4}
5document.addEventListener("click",async ({target})=>{
6  if(target.matches("#btn1")){
7    const startTime = new Date();
8    await sleep(4000);
9    setTimeout(() => console.log(new Date() - startTime), 2000);
10  }
11  if(target.matches("#btn2")){
12    const startTime = new Date();
13    sleep(4000);
14    setTimeout(() => console.log(new Date() - startTime), 2000);
15  }
16});
17</script>
18
19<button id="btn1">sleep1</button>
20<button id="btn2">sleep2</button>