読者です 読者をやめる 読者になる 読者になる

JSDeferred Code Writing

TechTouch #0b101で勉強したことの復習。

0:準備

htmlを用意。簡単のためにjQueryとかも読み込んでおく。JSDeferredも読み込んでおく。
Firefox限定。Firebug必須。

1:まずはfor文で

そもそもなんでJSDeferredがあるのかというところから。
JavaScriptはシングルスレッドに近いので、スクリプトの処理中はDOMのレンダリングなんかが止まってしまう。

実際にfor文で1000個の四角形の描画をしてみる。

イメージとしては「ランダムな場所にパラパラと四角形が表示される」なんだけれども、実際はずっと待って一気に1000個の四角形が表示される

2:それJSDeferred

何も考えずに、for文をJSDeferredのloop関数に変えてみる。

イメージしていたパラパラ表示になった。
これは1ループごとに処理(?)をDOM描画に渡しているため。

3:Deferredは起爆スイッチ


htmlの"fire"をクリックしたタイミングでFirebugのコンソールに「click fire」と出た後、「fire 1」「fire 2」と出てくる。
ユーザ操作による発火。
7行目のdeferredが起爆スイッチみたいなもので、それにnext()で処理を繋げておく。

んでもって、"fire"をクリックしてはじめてdeferred.call()が呼ばれて発火→処理が実行される。

ちなみに"cancel"をクリックするとdeferred.canseller()が呼ばれて繋げていた処理は全て無効になる。
JSDeferred面白い。

4:発火するまえにキャンセル

3秒以内に"cancel"をクリックしないと発火、とか。

5:発火するまえにキャンセル without JSDeferred

setTimeout()で純粋に3秒以内に"cancel"をクリックしないと発火

おまけ:parallel()の使い方

どうしても使い方がわからなかったので。
今のところDeferredリストを渡すという考え方が一番しっくりきている。

まとめ:JSDeferred面白い

実際に動かすと本当に面白い。
この回の前のTechTouchでCode Readingをやってわかった気でいたけれども、動かしてみると結構発見が多い。
そもそもJavaScriptでこんな考え方したことがない。
本当に面白い。

id:brazil++