処理中のユーザーの誤操作を防止しよう

準備

まず、HTMLにインジケータ表示範囲のdivと、ボタンを用意しましょう。

divとボタンにはidをつけてください。

<!-- インジケータ表示範囲 -->
<div id="container" class="sample">
 <!-- ボタン -->
 <input type="button" id="indicator" value="インジケータ表示">
</div>

イベントハンドラ内にインジケータ表示処理を記述する

ボタンのクリックイベントハンドラを記述し、その中にインジケータ表示処理を記述しましょう。

インジケータを操作するには、indicatorオブジェクトを使用します。

コントローラのindicatorメソッドを実行するindicatorオブジェクトが返り、そのshowメソッドを実行すると画面にインジケータが表示されます。

//インジケータオブジェクト取得（ここでのthisはコントローラを指します）
var indicator = this.indicator();
//インジケータ表示処理
indicator.show();

以下のように一行で書くと簡単でしょう。

this.indicator().show();

indicatorオブジェクトにはオプションがいくつかあります。

targetはインジケータを表示する範囲を指定するオプションです。指定しない場合はコントローラをバインドした要素に対してインジケータを表示します。（今回はtargetを指定しなくてOKです。）

messageはスロバーの左側に表示する文字列を指定するオプションです。

スロバーとはくるくる回る部品（処理中アイコン）のことです。今回はスロバーの横に'block'とメッセージを表示しましょう。

(function($){
 //コントローラ
 var indicatorController = {

  __name: 'indicatorController',

  //クリックイベントハンドラ
  '#indicator click': function(){
   //インジケータ表示処理
   this.indicator({
    message: 'block'
   }).show();
  }
 };
 
 //div範囲とコントローラを紐つける
 $(function(){ h5.core.controller('#container', indicatorController) });
})(jQuery);

これでボタンをクリックするとインジケータが表示さます。

インジケータを表示することでユーザは処理中であることが分かり、画面がブロックされているので操作が出来ないようになります。

 参考 コントローラ

 参考 イベントハンドラ

 参考 CSSセレクタの記法

 参考 うまく動かない場合

インジケータを除去する

2までの実装では、ボタンをクリックするとインジケータはずっと表示されたままです。

setTimeoutを使って指定時間後にインジケータを除去しましょう。

setTimeoutは、第2引数で指定したミリ秒後に第1引数の関数を呼び出すタイマー関数です。

インジケータを除去するにはindicatorのhideメソッドを使用します。

//インジケータを変数に保持する
var indicator = this.indicator({
 message: 'block'
}).show();

//0.8秒後にインジケータを非表示にする
setTimeout(function() {
 indicator.hide();
}, 800);

これで完成です。

インジケータに進行状況を表示してみよう

indicatorのpercentメソッドを使用するとインジケータの進捗状況をパーセント表示することが出来ます。

var progress = 0;
var id = setInterval(function(){
 //100以上でインジケータを除去し、処理を停止する。
 if (progress >= 100) {
  indicator.hide();
  clearInterval(id);
 }
 //進捗状況の表示
 indicator.percent(progress++);
}, 70);

 download

インジケータの色を変えてみよう

indicatorオブジェクトのthemeオプションを設定するとインジケータの見た目を変更することが出来ます。

//インジケータ表示
var indicator = this.indicator({
 message: 'block',
 theme : 'a orange-theme' //デフォルトテーマ「a」の後にCSSクラス名を指定
}).show();

 download

画面全体にインジケータを表示しよう

indicatorオブジェクトのtargetオプションにdocument.bodyを設定すると画面全体にインジケータを表示することが出来ます。

下記のはライブデモは領域がiframeで構成されているのでライブデモ内のみインジケータが表示されますが、downloadしたコードを実行すると画面全体にインジケータが表示されます。

//インジケータ表示
var indicator = this.indicator({
 message: 'block',
 target :document.body
}).show();

 download

処理中にインジケータを表示しよう

indicatorオブジェクトのpromisesオプションにPromiseを設定すると処理が実行されている間インジケータを表示することが出来ます。

Promiseを設定した場合は、処理が完了（done または fail）になると自動的にインジケータを非表示にします。

promisesオプションに複数のPromiseを設定する場合は配列で設定します。

// Promiseを返す処理1（4秒）
var func1 = this.own(function() {
 var df1 = this.deferred();

 setTimeout(this.own(function() {
  this._dump('処理1 end');
  df1.resolve(); //resolveするとpromiseがdoneになる
 }), 4000);
 return df1.promise();
});

//  Promiseを返す処理2（6秒）
var func2 = this.own(function() {
 var df2 = this.deferred();

 setTimeout(this.own(function() {
  this._dump('処理2 end');
  df2.resolve(); //resolveするとpromiseがdoneになる
 }), 6000);
 return df2.promise();
});

// func1とfunc2が終わるのを待つので、6秒待つことになる。
// promisesの配列に登録された全てのpromiseが完了（done or fail）になったタイミングでインジケータは非表示になる
var indicator = this.indicator({
 target:'#container',
 promises: [func1(), func2()]
}).show().message('処理中...');

 download

 参考 非同期処理

 参考 非同期処理とPromise（Deferred）を背景から理解しよう