0

ajaxを使用してサーバーにデータを送信しようとしていますが、問題は、データを送信する前に消費プロセスがあることです。

プロセスには約5秒かかり、スピナーはプロセスで実行する必要があります。

したがって、私のコードでは、ajax呼び出しが開始されるまでスピナーは表示されません（おそらくプロセスがすべてをブロックしているため）

「sumptionprocess」という呼び出しを「beforesend」に移動すると、機能せず、理由がわかりません。

したがって、問題は、すべてが呼び出されている間にスピナーを表示する方法です（消費プロセスとajax呼び出し）

ありがとう

これは私のコードです：

$("#btnAccept").bind("click", function(event, ui) {
          //start spinner, works fine but only shows after consumingprocess has finished
          $.mobile.loading( 'show' );

             console.log("btnAccept");

     var data =  consmuingprocess();
       console.log(data);
     // data is fine

                                 $.ajax({
                                           type : "POST",
                                           url : url,
                                           dataType : "xml",
                                           contentType : "text/xml;charset=UTF-8",
                                           data : data,
                                           requestHeaders : {
                                            Origin : '*'
                                            },
                                           crossDomain : true,
                                           beforeSend : function(xhr) {
                                            xhr.setRequestHeader("Authorization", "Basic xxxxxxxxxxxxxxx");
                                           console.log("beforeSend");
                                           },
                                           error : errorAJAX,
                                           success : parseXml
                                           });

            });

        });
4

1 に答える 1

0

あなたにできることは

  • 読み込みウィンドウを呼び出す
  • 読み込みウィンドウが表示される機会があるように遅延
  • 残りのコードを実行します。

これは、間隔を使用して行います。

$("#btnAccept").bind("click", function(event, ui) {
    var intervalId;

    function delayedStuff = function() {

        // make sure we only run this once
        window.clearInterval(intervalId);

        var data =  consmuingprocess();

        $.ajax({
            // set up your ajax request and handlers
        });
    };        

    $.mobile.loading( 'show' );
    // wait 1/2 second, then run delayedStuff
    intervalId = window.setInterval(delayedStuff, 500);
});

ただし、この手法には重要な注意事項があります。非常に高価なconsumingProcess関数が実行されている間、すべてのアニメーションとJavaScriptは停止します。Chromeでは、アニメーションGIFでさえ実行を停止します。ここで行ったのは、ページの変更に表示する機会を与えることだけです。

利用可能な解決策がいくつかあります。

  • consumingprocess()関数を詳しく調べて、最適化できるかどうかを確認してください。おそらく、あなたがしていることを何でもするためのより速い方法があり、それはとても時間がかかります。
  • WebWorkersを使用します。欠点は互換性です。IEとほとんどの古いブラウザは互換性をサポートしていません。私はJavaScriptを使ったマルチスレッドプログラミングをまったく行ったことがないので、これがどれほど効果的かわかりません。
于 2012-11-08T17:18:51.580 に答える