HTTPリクエスト（Appcelerator）を作成中にスピナーを表示する方法

Question

現在、通話が完了したときに終了するHTTPリクエストを作成中にスピナーを表示しようとしています。私はいくつかの異なるスピナーを作りましたが、コールが2回目になるとアニメーションがすべて停止します。

var spinnerArray = []; 
for (var i = 0; i < 20; i++) { 
    spinnerArray.push('/images/preloaderGif/preloader'+ ("0" + i).slice(-2) + '.gif'); 
} 
$.spinner.images = spinnerArray; 
$.spinner.duration = "200"; 
$.spinner.repeatCount = "0"; 

spin(); 

function spin(){ 
    $.spinner.start(); 
    callHTTP() //Prewritten function 
    Ti.App.addEventListener('callEnd', function(e){ 
     $.spinner.stop(); 
    }); 
} 

この結果、スピナーは決して出現しません。呼び出しをタイムアウト内に入れたり入れ子にしたりすると、スピンナーが無期限に回転するか、タイムアウトが終了するまでスピンナーが回転します。

スピナーが通話を継続する方法はありますか？

Answer 1

実際には、表示器を表示するには非常に良い方法があります。&以下の手順に従ってください。

1. ダウンロードこのウィジェットLoading Indicator Widget &はAPP->ウィジェットフォルダ内のプロジェクトに追加します。ウィジェットフォルダが存在しない場合は作成します。スクリーンショット以下に示すよう

2. はdependencies辞書内のあなたのAPP-> config.jsonファイルに次の行を追加します"nl.fokkezb.loading" : "*"。

3. Alloy.Globals.loading = Alloy.createWidget("nl.fokkezb.loading");あなたalloy.jsでファイル

この行を追加します。最後に、あなたは、HTTPリクエストを呼び出している間、適切に/非表示インジケータを表示するには、このコードを使用することができます。

function callHTTP() { 
    if (!Ti.Network.online) { 
     return; 
    } 

    Alloy.Globals.loading.show(); 

    var xhr = Ti.Network.createHTTPClient({ 
     onerror : function(e) { 
      Alloy.Globals.loading.hide(); 

     }, 

     onload : function(e) { 
      Alloy.Globals.loading.hide(); 

      // run your additional code here 
     }, 
    }); 

    xhr.open("GET", url); 
    xhr.send(); 
} 


callHTTP(); 

このウィジェットを使用すると、さまざまなプロジェクトにエラーが発生しやすい長いコードを書く必要はありません。 &このウィジェットを追加するだけで、2行のコードでローディングインジケータの表示/非表示を切り替えることができます。

XHR エラー/成功 HTTPリクエストが完了したときに確信が持てないように、インジケータを隠すコードを書くことができる唯一の場所はコールバックだけです。

Answer 2

あなたはActivityIndi​​cator使用することができますhttp://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ActivityIndicator

$.activityIndicator.show(); 
var xhr = Ti.Network.createHTTPClient({ 
    onerror : function(e) { 
     // code 
     $.activityIndicator.hide(); 
    }, 
    onload : function(e) { 
     // code 
     $.activityIndicator.hide(); 
    }, 
}); 

xhr.open("GET", url); 
xhr.send(); 

を