0

関数の実行前に読み込みアイコンを表示しようとしていますが、これを行う方法がわかりません。

私のコード:

$(".chartType").on("click", function(event){
    $("#wrapper").addClass("loading");      
    changeChartType($(this).attr("value"));     
    $("#wrapper").removeClass("loading");
});

チャートが実際にロードされた後、ロード アイコン (removeClass() がコメント アウトされている場合) が表示されます。誰かが解決策を知っている場合は、今すぐ教えてください。

setTimeOut()、jQuery の when、then、および done を使用しようとしましたが、何も機能していないようです。

さまざまなグラフを表示するために Google の視覚化グラフを使用しています。アイコンをクリックしてチャートを切り替えることができます。

その後、上記の関数が実行されます。

関数 changeChartType():

function changeChartType(typePar){
    chartType = typePar;
    chart = new google.visualization[chartType](chartDiv);
    drawChart();
}

drawChart では chart.draw(); を呼び出すだけです。これにはしばらく時間がかかるため、読み込み中のアイコンを表示したいと考えています。

問題は、読み込みアイコンを削除することではなく、クラスを追加して読み込みアイコンを表示することです。現在、チャートが描画された後にクラスが追加されます。たぶん、これを同期する ay があります。

4

3 に答える 3

0

3 つの関数はすべて同期的です。つまり、非常に短い時間で次々と実行されます。非同期関数は時間がかかり、コールバックがあるため、終了後に処理を実行できます。例えば：

$(".chartType").on("click", function(event){
   $("#wrapper").addClass("loading");      
   $("element").on("load",function(){
      $("#wrapper").removeClass("loading");
   });     
});

「removeClass」関数は、「要素」がロードされた後に実行されます。

于 2013-05-08T14:36:53.523 に答える
0

ラッパーは、changeChartType 関数が終了する前に実行されている行を削除します。前の関数に何らかの方法でラップされていない場合、removeClass 関数は読み取られるとすぐに起動しますが、これは前の関数が終了する前である可能性があります。

$(".chartType").on("click", function(event){
$("#wrapper").addClass("loading"); 
$.when( { changeChartType($(this).attr("value")) } ).done(
   $("#wrapper").removeClass("loading");
); });

私はこれをテストしていませんが、タイプミスは別として、アイデアはうまくいくはずです。

when/done ドキュメントへのリンクは次のとおりです: http://api.jquery.com/jQuery.when/

于 2013-05-08T14:37:39.133 に答える
0

Google Charts Visualization APIのdrawメソッドは非同期であるため、関数チェーン全体が非同期になります。あなたがする必要があるのは、このすべての混乱によって引き起こされるイベントをリッスンし、それに応じて行動することです. イベントは、ここで定義および説明されています。

これを機能させるには、コードをかなりオーバーホールする必要があります。これを行う最も簡単な方法は次のとおりです。

$(".chartType").on("click", function(event){
   $("#wrapper").addClass("loading");
   var chart = new google.visualization[$(this).attr("value")](chartDiv);
   google.visualization.events.addListener(chartDiv, 'ready', function() { $("#wrapper").removeClass("loading") });
   chart.draw();
});

これは機能するはずchartDivですが、スコープ内にあると想定しています。

于 2013-05-08T14:39:24.070 に答える