どこで1回目と2回目を判定しているのかわからない

Question

下記のソースは、ブレイクスルーjavascript99頁のソースです。
ドキュメント要素をクリックするたびにコンソールが表示されるが、二回目以降は、1秒処理を遅らせるものです。

//jquery 3.3.1
var prevState = new $.Deferred().resolve().promise();

function asyncFuncDef() {
    var deferred = new $.Deferred();
	setTimeout(function() {
	    deferred.resolve("done");
	}, 1000);
	return deferred.promise();
}

$(document).on("click",function() {
    prevState = prevState.then(function() {
	    console.log("done");
		return asyncFuncDef();
	});
});

ソースのどのあたりで、一回目と二回目を判別しているのでしょうか。
一見するとクリックされるとクリックで発火するイベントリスナーが実行され、asyncFuncDef()が返値で実行され、またクリックされるとクリックで発火するイベントリスナーが実行され、asyncFuncDef()が返値で実行され…
と一回のクリックでdoneが二回表示されるようにしか見えません。しかし、実際に実行するとそうではありませんでした。

どこで1回目と2回目を判定しているのでしょうか。

Answer 1

追記あり。

1回目と2回目を判別しているというよりは、「次の処理を１秒待たせている」という解釈が正しいです。
asyncFuncDefで返ってくるのはpromiseオブジェクトですが、この関数中で新しいdefferedオブジェクトを作成し、そのdefferedの中の新しいpromiseを返します。
この返ってきたpromiseオブジェクトの状態は、returnした時点ではpendingです。
このpending状態は直上の処理のsettimeoutにより、1000ms後にdoneになります。
doneにならないと次のthen以降の処理が実行されません。
よって、クリックされたときの処理が前の処理の実行より1秒待たされることになります。

なお、deferred.resolve("done");の"done"ですが、これはconsole出力上は何の意味もありません。
ちょっとややこしい。

追跡ログを埋め込んだサンプルコード

実行してコンソールにどんな順番でログが出力されるか確認してください。

//jquery 3.3.1
var prevState = new $.Deferred().resolve();

function asyncFuncDef() {
    var deferred = new $.Deferred();
    console.log('asyncFuncDef処理開始');
    setTimeout(function() {
		    console.log('setTimeoutの中身開始');
        deferred.resolve("timeout");
		    console.log('setTimeoutの中身終了');
    }, 1000);
    console.log('asyncFuncDef処理終了');
    return deferred.promise();
}

$(document).on("click",function() {
    console.log('クリック処理開始');
    console.log('prevState.then処理開始');
    prevState = prevState.then(function() {
        console.log("done");
        return asyncFuncDef();
    });
    console.log('prevState.then処理終了');
    console.log('クリック処理終了');
});

Comments

[aaaaaaaa]

ご回答ありがとうございます。
おかげさまで、だいぶ処理の流れが理解できたかもしれないです。が、一つ質問させてください。

処理の流れは、間違っていなかったら

一回目
1.まず処理の状態を表す変数prevStateをresolveにする。
2.発火条件がクリックであるイベントリスナーが実行されたら、prevStateに
「new $.Deferred().resolve().promise().then...」を代入。
console画面に「done」を表示。返り値であるasyncFuncDef()を実行する。
3.asyncFuncDefの中で新しいDeferredオブジェクトを作る。
settimeoutが第二引数に指定した数値秒後(return後)に実行される。(その間、再びクリックで発火しても待機)
返り値で先ほど新しく作ったDeferredの状態をpendeingにし、prevStateを上書きしてreturn。settimeoutがまだ生きているので実行されるまで待機。
settimeoutで指定経過時間が過ぎたので実行され、resolveとなる。
一回目終わり

二回目以降…一回目と同じ

になると思います。

settimeout内のdeferred.resolveでグローバルオブジェクトの一行目で設定した状態(prevState)を更新したということだと思うのですが、
newした時点で別のインスタンスのはずで、returnでpendingにしたり、settimeoutでresolveにしたのは、asyncFuncDef()内のdeferredなのに、なぜprevStateの処理状況を変えることができたのでしょうか。

[hope_mucci]

処理の流れに認識誤りがあります。

1.まず処理の状態を表す変数prevStateをresolveにする。
2.発火条件がクリックであるイベントリスナーが実行されたら,then(...)を非同期で実行するようにスケジュールする。
　（ここではまだthenの中の関数は実行されていない）
3.イベントリスナーの関数が終了する。
4.thne(...)の中の関数が実行開始される
5.console.log("done");が実行される
6.asyncFuncDefが実行される
7.asyncFuncDef中、新しいDeferredオブジェクトがNewされる。
8.setTimeoutの中のfunctionが1000ms後実行されるようにスケジュールされる。
9.return deferred.promise();が実行されpromiseオブジェクトが返る。
10.return asyncFuncDef()が解決され、prevStateに9.で返ってきたpromiseオブジェクトが代入される。
11.1000ms後にsetTimeoutの中身が実行開始。
12.deferred.resolveが実行される。deferredの中のpromiseオブジェクト すなわちprevStateの状態がdoneになる。

２回クリックした場合、タイミングとしては10.と11の間にクリックされますが、

10.return asyncFuncDef()が解決され、prevStateに9.で返ってきたpromiseオブジェクトが代入される。
10-1.2回目クリックされ、イベントリスナーの中身が実行開始
10-2.then(...)の中の関数実行が非同期でスケジュールされる。
関数の実行は、prevStateの状態がpendingなのでdoneになるまで待たされる。
10-3.イベントリスナーの関数が終了する。
11.1000ms後にsetTimeoutの中身が実行開始。
12.deferred.resolveが実行される。deferredの中のpromiseオブジェクト すなわちprevStateの状態がdoneになる。
13.thne(...)の中の関数が実行開始される
14.console.log("done");が実行される
以下、１回目の6以下と同じ

2回目クリックの時点ではすでに新しいpromiseオブジェクトがpending状態でprevStateにセットされているので、doneになるまでthenの中の処理を待たせることができるのです。

console.logで1行処理が進むごとに番号か何かを出力するようにすると流れがよくわかります。

[aaaaaaaa]

ご返答ありがとうございました。
間違いを訂正していただいてありがとうございます。詳細な回答で処理の流れがつかめることができました。危うく誤解したまま先に進めるところでした。

てっきり一行目で状態をrezolveにしているのでイベントリスナーが実行された時点で即時にthenの第一引数が実行されるものだとばかり思っておったのですが、
イベントリスナーが終了してから実行されるのですね。これは、thenの効果でそうなったのでしょうか。それともほかの記述が要因となってそうなっているのでしょうか。

また、settimeoutで設定した秒数が0になるまえに再び画面のどこかしらをクリックしたさい、処理の流れの「10.」と「11.」の間に割り込む(?)ことになるそうですが、これは、1秒後に実行するという設定をもったsettimeoutが、割り込んだ処理から見て後ろにいるということ、
つまり「10.」「二度目のクリックの際に実行される処理」「11.」
というキューの形になっているからこのタイミングとなるのでしょうか。

[hope_mucci]

１つ目。
結果的にイベントリスナーの処理が終了してからthenの中身が実行されているだけで、必ずしもイベントリスナーの終了を待つわけではないです。thenとイベントリスナーの関数終了の間に時間のかかる処理があればthenの中の非同期処理のほうが先に動くことも考えられます。

２つ目。
10.までの処理は一瞬で(数msオーダー）終了するので人間のクリック速度ではその間にクリック動作を挟めないというだけです。

promiseの仕組みをこのようなコメント欄でレクチャーするのは大変なので（誤った解説をしないようこちらも非常に気を使います）、あとは自己学習してください。promiseの解説をしているブログやWebサイトはいっぱいあるのでいろんな記事を読んでみてください。