setTimeoutは先行の処理を待たないという説明をdotinstallで聞きましたが、そうなんでしょうか？

先行の処理を待たないというのは
どういう事なのでしょうか？

以下環境、コードで試してみたところ
前>おもい>後>中という実行結果になりました。

ちゃんとomoi();を待っているような気がするのです。

どなたか教えて頂けませんでしょうか。。。

●環境
chrome 42.0.2311.135 m
windows7 ultimate SP1

●コード

<html lang="ja"> <head> <title>test</title> <meta charset="utf-8"> </head> <body> <script> function omoi() { //※4秒くらいの処理 var i = 1; var j = 1; while (i < 6000000000) { j += i; i++; } console.log("おもい") }

console.log("前");

omoi();
setTimeout(function() {console.log("中");}, 1000);

console.log("後");

</script> </body> </html>

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

回答4件

ドットインストールで言われていた事(※)はよく理解できませんでしたが、
皆様からの回答のお蔭でタイマー処理の使い方はなんとなくわりましたので、
クローズと致します。
そこにこだわっても仕方ない気がしてきましたので。。。

皆様本当にご回答ありがとうございました。

どの回答も有りがたかったのですが、
本質を示して頂いたpasuwardoさんにBA入れさせて頂きます。

(※)『setInterval の方は前の処理が終わったかどうかというのを考えずに次の処理を始めてしまうので、あまりにも処理が重い場合には、次々に新しい処理が実行されて、ブラウザがクラッシュしてしまうという問題があります。
setTimeout の方はちゃんと前の処理が終わったかどうかを考慮するので、実は繰り返し処理には setTimeout の方がよく使われたりします。』

投稿2015/05/06 03:09

777

総合スコア34

確かにjavascriptはシングルスレッドなのですが
ブラウザにもsettimeout用のスレッドがあってそこに登録しているだけなんです
http://blog.mouten.info/2014/09/20/article/
少し難しいかもしれませんがここを読んでみてください

投稿2015/05/05 12:06

退会済みユーザー

総合スコア0

777

2015/05/06 01:50

pasuwardoさんご回答ありがとうございます。以下理解でよろしいでしょうか？（例：）ステップ1:2秒の予約間隔を持たせたAと出力するコードステップ2:4秒のビジーウェイト 0秒目:2秒後にキューイングを予約する 1秒目:ビジーウェイト(1/4) 2秒目:ビジーウェイト(2/4)　ビジーウェイトの最中だが構わずキューイングされる 3秒目:ビジーウェイト(3/4) 4秒目:ビジーウェイト(4/4) 5秒目:キューイングしたコードが実行されるポイントとしては、指定した秒数後に実行されるわけではなく、指定した秒数後にキューイングがされて、キューのコードはスレッドが空になったら順次実行していく。

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

ベストアンサー

「先行の処理を待たない」とはなかなか小難しい言い回しですね…。
setTimeoutは誤解を恐れず言えば非同期処理の一種です。

前の行が動く
おもいの行が動く
1秒後に中と出すように予約
後の行が動く
予約してあった中の行が動く

なので、前＞おもい＞後＞中なんだろうなあとは理解できるのですが
「前の処理を待たない」という説明が腑に落ちなくて。。。

おそらくそのサイトの言いたいことは、「setTimeoutを使っても、今行われている処理はブロックされませんよ」ということだと思います。
JavaScriptは通常は関数の上から順に実行されますが、setTimeoutで登録された関数はそれとはまた別に（見かけ上）並行して実行されます。
JavaScriptはシングルスレッドなので重い処理を挟めば画面は簡単に固まりますが、setTimeoutを用いることでそれを回避できる場合があります。

lang
1while (true) {
2    console.log("abc");
3}

lang
1function func() {
2    console.log("abc");
3    setTimeout(func, 0);
4}
5func();

上の二つはどちらも延々とabcをコンソールに出力し続けるだけのものですが、上は実行すると画面が完全に固まるのに対し、下は画面に対してクリックやスクロール等の制御が通常通り行えるはずです。
これはsetTimeoutが他の処理を邪魔しないからです。

こんなところでどうでしょうか。
厳密には違う個所もありますが、これくらいの認識でいいと思います。

投稿2015/05/04 16:57

htsign

総合スコア870

777

2015/05/04 17:11

htsignさんご回答ありがとうございます。もうちょっと実験してみます！

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

setTimeout(function() {console.log("中");}, 1000);
は、この行を通過した1秒後にfunction(){console.log("中");}を実行するという意味であって、
setTimeout(...)のコードを先読みしてくれるという意味ではありません。

投稿2015/05/04 16:14

rik

総合スコア1151

777

2015/05/04 16:22

rikさん、ご回答ありがとうございます。挙動としては前の行が動くおもいの行が動く 1秒後に中と出すように予約後の行が動く予約してあった中の行が動くなので、前＞おもい＞後＞中　なんだろうなあとは理解できるのですが「前の処理を待たない」という説明が腑に落ちなくて。。。もう少し噛み砕いて頂けますでしょうか＞＜

rik

2015/05/04 16:33

おっしゃる通り、前＞おもい＞後＞中　となりますが、 dotinstallに書かれていた内容は、「後」が前の「中」を待たずに実行されているという意味ではないでしょうか？ setTimeoutは処理を遅延させるという事で、 console.log("後"); が前の処理を待たずに実行されます。 dotinstallに書かれていた内容が曖昧だったか、間違って書かれていた可能性があります。

777

2015/05/04 17:09

ご回答ありがとうございます。すぐに理解出来そうにないので、もう少し頂いた回答を読み返してみますね。ちなみに、ドットインストールでは setInterval の方は前の処理が終わったかどうかというのを考えずに次の処理を始めてしまうので、あまりにも処理が重い場合には、次々に新しい処理が実行されて、ブラウザがクラッシュしてしまうという問題があります。 setTimeout の方はちゃんと前の処理が終わったかどうかを考慮するので、実は繰り返し処理には setTimeout の方がよく使われたりします。と講師の方が仰っていました。

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

あなたの回答