【Javascript】非同期実行を実装し、ボタンを押したフィードバックを全画面に行う 【お家IT#16】

本件の実装の一部  
motojapan.hateblo.jp

前回の続き  
motojapan.hateblo.jp

目次

前回までで、javascript/CSSを用いて撮影画面を作成した。
最後にUIの完成度を高めたいので撮影ボタンを押したらバックグラウンド全体が青くチカっとフラッシュするようにしたい。

そもそもの問題

ボタンを押したら、バックグラウンドの色をチカッっとしたい。
Windowsのメッセージで言うところのWM_LBUTTONDOWN と WM_LBUTTONUP のイベントが取れればよかったのだが、これに相当する関数が見つからなかったので、
onClick時に非同期メッセージを飛ばしてbackgroundカラーを変更することにした。
（ダサいのでいい方法あったら教えてください）

非同期にする方法

いろいろ調べたが、この資料がわかりやすい。
JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる - Qiita

実装

setTimeoutに非同期実行したい関数を設定する。
背景色の変更は、body.classNameに所望のレイアウトを指定することで可能。

//**************** css ***********************

<style type="text/css">
...
.background_color_theme{
    background: #ffffff; /*デフォルトの背景色*/
}
.background_color_bt_pressed_theme{
    background: #0000ff; /*フラッシュ用の青色*/
}
...
</style>

//************ javascript ********************

<script type="text/javascript">

function take_picture() {
    //前回までに追記
    //（base64で画像を送信する実装）
    ...
    setTimeout(function(){body.className = "background_color_theme"}, 60); // 60 [msec]後に元のテーマに戻る
    body.className = "background_color_bt_pressed_theme"; 
}

</script>

以上。
次回からは画像処理の話をしたい。