tech memorandom

Webに関して調査したことや、メディアアート系(Max,Processing)で調査したことなどを書いていきます。

描画の同期をとるならpromise()が便利

レンダリング後に同期をとって処理を行わないとレンダリングコードの 後の処理が先に実行されてしまうケースが発生してしいます。

そういったケースがおきてはいけない場合、 特定のエレメントに書き込みが行われたかどうかを判定する必要があります。 (次の処理がエレメント内の値を参照している場合やエレメント内に書き込む場合など)

■よくない書き方

      $("#plan-photo").html(this.imageView.render()); //class指定されたエレメントに描画
      this.imageView.initPh(); //描画されたエレメントを参照してイベントなどをバインド

上記のケースの場合、レンダーが終わらないうちに先にinitPhが実行されてしまうケースがあります。 そのためinitPhは正常に実行されません

■同期をとった書き方

      $("#plan-photo").html(this.imageView.render()); //エレメントに対して描画
      $("#plan-photo").promise().done(function(){ //描画書き込み完了後にinitPhを実行
        that.imageView.initPh();
      });

promiseをつかってエレメントを監視し、 完了後に後続処理を実行することで同期をとることができます。

描画のタイミングで困っている場合は、setTimeoutや_.delayよりも上記方法のほうが確実です。

ご存知ないかた、お試しくださいませ。