setTimeoutの処理の動きを理解したい

Question

前回の投稿の続きです。
Ajaxを使うとsetTimeout処理がうまくいかない

現在HTML,Javascript（ｊQuery）を使ってアプリを作っています。

前回の投稿に画面デザインとコードがあるのですが、

**setTimeout内で書いたAjaxコードは,clearTimeoutをしても
リクエストが飛ぶ、もしくは、飛ぶことがある。**ということがわかりました。

そこで

setTimeoutの処理の動きを理解したい

と思い、質問しました。

単刀直入に考えをぶつけると、
setTimeout内の処理は、n秒後に処理が流れて実行されるわけでなく、
n秒経つ前にすでに処理は流れていて、それがn秒後に実行されるのでしょうか？

前回コードの動きのイメージは以下でした。

1.文字入力後、setTimeoutで0.5秒後に実行される処理を予約する
2.ボタン押下し、clearTimeoutで予約していた処理をキャンセルする
3.そのためsetTimeout内に書かれているAjaxの処理は走らない

ただ今回の動きを見て、またアドバイスから、動きのイメージはこうでしょうか？

1.文字入力後、setTimeoutで0.5秒後に実行される処理を予約する。すでに処理は流れているが、実行されない。
2.ボタン押下し、clearTimeoutで予約していた処理をキャンセルする
3.リクエストを投げていたAjaxの処理が実行されることがある

やはり知りたいのは
setTimeout内の処理は、n秒後に処理が流れて実行されるわけでなく、
n秒経つ前にすでに処理は流れていて、それがn秒後に実行されるのでしょうか？
ということになると思います。

例えば前回コードのAjax処理の上に
console.log('テスト');
があった場合、この処理も
setTimeoutのn秒後に実行される前に流れているのでしょうか？
それともAjaxに限ったことなのでしょうか？

長くなってしまいましたが、setTimeoutとAjaxの動きについてわかる方がいらっしゃいましたら、お答えいただけると有難いです。

Answer 1

Ajaxの場合、「結果が帰ってきてから行われる処理」は、ちょうどsetTimeout()の例のように、別個に実行されます。ということで、時間が経つギリギリぐらいにボタンを押した場合、

1. Ajaxのリクエストが送信されて、「リクエストを受け取った場合の処理」が設定される
2. clearTimeout()で、「リクエストを送る処理」が削除される
3. リクエストが帰ってくると、2で削除されたのとは全く別個に、「リクエストを受け取った場合の処理」が動く

という流れになっています。「setTimeout()してもその場で実行される」なんてことはありません。

Comments

[k499778]

回答ありがとうございます。
大方悩みが解消されました。

完全に理解するためにもう少し踏み込んでお聞きしたいのですが、

setTimeout内の処理は時間が経つ前に流れることはない。が,
setTimeout内のAjax処理は流れている(=リクエストを投げている)。
それはAjaxが別個(=非同期？別スレッド?)で実行されるから。

という認識で合っていますか？

また、別個で実行されるのに、
clearTimeout()で、「リクエストを送る処理」が削除される
のも腑に落ちません。

もしお答えいただけたら教えていただきたいです。

[k499778]

clearTimeoutをしたときAjaxのリクエストが飛んだり飛ばなかったりしていたのは、
次のような認識で合っているでしょうか？

1. Ajax処理は別個で実行されるため、setTimeout内でも実行される。
2. そのAjaxのリクエストを投げる処理が,clearTimeoutの前に実行された場合は、レスポンスを返してしまう。
3. そのAjaxのリクエストを投げる処理よりも前に,clearTimeoutが実行された場合は、リクエスを投げる処理が削除されるためレスポンスを返さない。

文字入力してからすぐAjax処理が実行されるわけでない？実行されるまでに少しのタイムラグが生じる？のでその間にclearTimeoutされるかされないかでAjaxが実行されるかされないかが変わる。

このような感じで合ってますしょうか？

Ajaxは別個に実行されるとはいえ、setTimeoutで設定されている秒数、0.5秒後に実行されるのでしょうか？

多くの質問を投げてしまい申し訳ないですが、お答えいただければと思います。

[unau]

横から失礼します。k499778 さんは、イベントドリブンというメカニズムをきちんと勉強されるとよいと思います。
・「ユーザがある DOM 要素をクリックした」「指定された時間が経過した」「非同期で送ったリクエストに対するレスポンスが返ってきた」など、すべて「イベント」です。
・あるイベントが発生したときに実行すべき処理を「イベントハンドラ」と言います。イベントにイベントハンドラが登録されていると、そのイベントが発生したときにそのイベントハンドラが実行されます。
・一度登録したイベントハンドラを削除することができます。

「$().on(イベント名, イベントハンドラ)」「setTimeout(イベントハンドラ, タイムアウトイベントが発生する時間)」「$.ajax()」など、いずれもイベントハンドラの登録です。「$().off()」はイベントハンドラの削除、「crearTimeout()」はイベントハンドラを削除しますし、タイムアウトイベント自体が発生しなくなります。

ということを踏まえますと、
1. 文字入力イベントのハンドラの中で setTimeout でタイマーを設定する（タイムアウトイベントを発生させるタイマーの設定＆タイムアウトイベントハンドラを登録する）
2. 0.5 秒経ち、タイムアウトイベントが発生し、ハンドラが起動する。このタイムアウトイベントハンドラの中で ajax のレスポンス受信イベントのハンドラをセットして ajax リクエストを投げる
3. ボタン押下イベントハンドラの中でタイマーを削除する（もしかしたらすでにないかも）。
4. ajax レスポンスが戻ってきてレスポンス受信イベントが発生する。登録されているレスポンス受信イベントハンドラが実行される。

という動きです。縦でも横でもいいですから時間軸を設定して、どのタイミングでどういうイベントのハンドラが登録されているか、どういうタイミングがだとイベントハンドラの登録削除が行われるか、どこでイベントが発生しイベントハンドラが実行されるか、を図に描いてみることをおすすめします。

[k499778]

unauさん回答ありがとうございます。
大変勉強になりました。
時間軸を自分でも書いてみました。またイベントドリブンも勉強してみます。

それを踏まえた上で質問させてください。

今回の事象は0.5秒後のことではないでしょうか？
0.5秒以内のことだと勝手に思っており、AjaxのclearTimeoutが効かない。と勝手に思っていましたが、そうではなく、
今回ボタン押下時も赤色になるパターンは

１. 0.5秒経ち、setTimeoutが実行され、Ajaxがリクエストを投げる
２. ボタン押下の青色に変える処理が実行される
３. Ajaxのレスポンスをが返ってきて赤に変える処理が実行される
　 →ボタン押下したにも関わらず、赤になる時がある

ということではないでしょうか？

0.5秒以内のときはclearTimeoutにより、Ajax処理を含めたsetTimeoutイベント削除するため、Ajax処理は実行されていない。

この認識なのではないかと考えています。

もしお答えいただければよろしくお願いします。

[unau]

起こっている事象は複雑に見えますが、ひとつひとつの「イベント発生」「イベントハンドラ登録」「タイマーイベントの登録」「タイマーイベントの削除」「イベントハンドラの実行」それぞれは単純です。タイマーを併用すると ajax 自体の動きが変わる、とかはありません。タイマーはタイマー、ajax は ajax、それぞれお互いに関係なく動きます。

おっしゃるように、0.5秒以内のときは ajax リクエストは飛ばない、すなわち、ボタン押下でも赤になるのは 0.5秒すぎて ajax リクエストが飛んだ場合、と推測されます。ajax はネットワーク越しにリクエストを投げるわけですから、当然、いくばくかの時間がかかります。

失礼ながら、一連の質問を背景していますと、ちょっと前のめりになりすぎている感じがしますので、もう一度、過去の質問につけられた回答やコメントを熟読し、しっかり理解されるとよいと思います。イベントドリブンなシステムをきちんと理解できていれば、さほど難しいことをアドバイスされているのではないというのがわかるかと思います。

[k499778]

返答ありがとうございます。
アドバイスのおかげで
今回のボタン押下したのに、赤になってしまうケースに関しては理解できてきたように思います。

・今回のケースは0.5秒以上経って、普通にsetTimeout処理が実行されたケース。
・そしてAjaxのリクエストを投げて、レスポンスが返ってくるまでの間に、ボタン押下の処理が実行されたケース
・Ajaxのリクエストとレスポンスの間には、ネットワーク越しの処理なので多少の時間がかかるため、その間にボタン押下処理が実行されてしまうことがある

setTimeout処理が実行されていないにもかかわらず、Ajax処理が別個に実行されるような解釈をしてしまい、clearTimeoutしてもAjaxだけは実行されているのかなと思ってしまって、すごくややこしくなっていました。

ただsetTimeoutが実行された後ということなら、すんなり自分の中に落としこむ事ができそうです。

それもunauさんを始め、多くの方のアドバイスがあったからです。

仰るとおり、まだまだ未熟な部分は多分にございますので、
イベントドリブンの勉強をし、日々精進していきます。
長々と付き合ってくださりありがとうございました。