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でこんな考え方したことがない。
本当に面白い。
