4

クリック ハンドラーに関連付けられたボタンがあります。これは、配列内のアイテムの数に応じて、1 つまたは複数の AJAX 呼び出しを行います。blockUI jquery プラグインを使用して、ajax 呼び出しが行われている間にメッセージを表示してから、結果を表示し、$.unblockUI(); を呼び出して blockUI メッセージを削除します。

問題: なんらかの理由で、ajaxCall 関数を何度実行しても、最初の ajax 呼び出しが完了した後、ループがまだ実行されていてもメッセージが削除され、結果が #results div に正しく表示されます。メッセージングを削除する前にループの反復をすべて完了させたいのですが、順番に実行されていないようです。問題のコードは次のとおりです。

$("#myButton").live("click", function(){
    $.blockUI({ message: '<img src="new_loader.gif" /><h2>Getting Config Files</h2><small>Please be patient.</small>',
            css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#FFF', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px',  
            color: '#000' 
            } 
        }); 

    for (var i=0; i< myArray.length; i++)
        {
         ajaxCall(myArray[i]);
        }
    $("#results").show('slow');
    $.unblockUI();  
    return false;
});

ループがまだ完了していないにもかかわらず、ループが実行された後のコードが実行される理由についての説明はありますか? どんな助けでも感謝します！ありがとう。

4

3 に答える 3

4 
 ajaxCall(myArray[i]);

非同期で実行されるため、メソッドはループ内で起動されますが、実行にはもう少し時間がかかるため、残りのコードが終了した後に終了します。

この種の動作を処理する良い方法は、次の記事にあります: JavaScript での非同期メソッド キュー チェーン

于 2011-01-31T18:32:42.843 に答える
2

何ajaxCall()をしても、非同期に作成される場合XMLHttpRequest、これは正しい動作です。Ajax リクエストはデフォルトでノンブロッキングです。これが、ループ後のコードがすぐに実行される理由だと思います。

これを解決するために考えられる 1 つの方法は、カウンター変数を作成することです。カウンター変数は、各ハンドラーからの呼び出しごとに増加しajaxCall()、各ハンドラーで減少しますcomplete(XHR readystate 4)。そのカウンターがゼロになったら、ループの後にコードを実行する必要があります。

function increase() {      // goes into your `ajaxCall()` or `beforeSend` callback
    mynamespace.requests++;
}

function decrease() {      // goes into your `complete` callbacks
    if(--mynamespace.requests) {
        $("#results").show('slow');
        $.unblockUI();  
    }
}
于 2011-01-31T18:32:19.300 に答える
1

私はそれajaxCallが非同期だと思いますか？これにより、コードがループでブロックされなくなり、基本的にループがすばやく完了してから先に進みます。

できることは、すべての ajax 呼び出しが完了したかどうかを確認するカウンターをコールバック関数に提供することです。

var count = arr.length - 1;
for(var i = 0; i < arr.length; i++)
{
    ajaxCall(arr[i], function () {
        if(--count == 0)
        {
            /* All AJAX calls complete, continue execution */
        }
    });
}
于 2011-01-31T18:32:42.703 に答える