3

要するに、まず alert(1) を実行するにはどうすればよいですか?

    $.post('example.php', function() {
        alert(1);
    })
    alert(2);
    alert(3);
    alert(4);

しかし、jquery ajax呼び出しは非同期メソッドで実行されているようです。したがって、JavaScript は最初に以下のすべてを実行します。つまり、alert(2) から alert(4) まで、次に post メソッドの alert(1) に戻ります。

確かに、コードを ajax 関数に入れるだけで済みますが、数十の関数がある場合、これは意味がありません。すべての関数にコードを追加する必要があります。

    $.post('example.php', function() {
        alert(1);
        example();
    })

    function example() {
        alert(2);
        alert(3);
        alert(4);
    }

ajax 呼び出しから json データを取得し、後で使用したいと考えています。スマートな解決策はありますか？

2021-08-25

8年後、async / awaitの導入は素晴らしいです。私はもうjqueryをあまり使用していないので、コードをテストしませんでした

await Promise.resolve($.post('example.php', function() {
    alert(1);
    example();
}));

alert(2);
alert(3);
alert(4);
4

4 に答える 4

2

jQuery では、単純に $.when と $.then を使用することを好みます。これは簡単に実行でき、これを使用するとコードが読みやすくなります。

function CatchTheFish(){
console.log('we are catching the fish');
}
function EattheFish(){
console.log('now time to eat this fish');
}
$.when ( CatchTheFish() ).then( EattheFish() );

このコードは、jQuery 1.9.1 の最新バージョンで動作します。

于 2013-05-20T04:00:33.800 に答える
2

「確かに、コードを ajax 関数に入れることはできますが、関数が数十個ある場合、これは意味がありません。すべての関数にコードを追加する必要があります。」

これを簡単にするパターンはたくさんありますが、何十もの関数がこの投稿を呼び出す必要があると言っている場合は、投稿を関数に入れ、関数にコールバックを受信させることができます。

function myPost(callback) {
    $.post('example.php', function(data) {
        alert(1);
        callback(data);
    })
}


// These are your "dozens of functions"
function a2() { alert(2); }
function a3() { alert(3); }
function a4() { alert(4); }


// These would be at various places in your application
myPost(a1);
myPost(a2);
myPost(a3);

最終的に最善のアプローチは、「数十の関数」が何を意味するかによって異なりますが、暗示されているように見えるハードコーディングを行う必要はありません。

多くの場合、引数として関数を渡しますが、必要に応じてキューを設定する他のパターンもあります。

于 2013-05-18T23:33:09.903 に答える
0

alerts がこの順序で起動する理由は、AJAXの「 A 」がAsynchronousを表すためです。

コードの実行方法は次のとおりです。

  • このpostメソッドはサーバーにリクエストを送信します。2 番目のパラメーターは、サーバーからリクエストが返されたときに呼び出されるコールバック関数です。
  • 呼び出しの後、次のコード行に進みpost、発火します。alert(2);
  • 次に、次の行の発砲alert(3);
  • 次に、次の行の発砲alert(4);
  • このコード ブロックの実行は終了し、制御はイベント ループに戻ります。
  • サーバーが Ajax リクエストを返すと、コールバック関数が呼び出されて起動しますalert(1)

これを解決する最善の方法は、すべてのコードをコールバック内に移動することです。これにより、リクエストが返されたときにのみ実行されます。

$.post('example.php', function() {
    alert(1);
    alert(2);
    alert(3);
    alert(4);
})

おそらく、質問の最後で提案したように、別の関数に入れて呼び出す必要はありません。

「同期」Ajax リクエストは避けたいと思います。矛盾していることは別として、それらは Ajax を使用する目的全体に反します。Ajax を使用すると、アプリケーションの応答性が向上します。同期要求を使用すると、その逆になります。要求がタイムアウトしたり、サーバーからの応答に時間がかかったりすると、ブラウザがロックアップする可能性があります。

于 2013-05-18T23:59:03.420 に答える
0

jQuery のカスタム イベントを利用する別の方法を次に示します。基本的には他の非同期提案の回答と同じですが、見た目がわずかに異なり、コードをきれいに保つのに役立つ場合があります...

オブジェクトを使用してカスタム イベントをバインドします。onそのオブジェクトで jQueryのメソッドを使用して、1 つ以上のハンドラーをバインドします。非同期関数の最後でカスタム イベントをトリガーすると、jQuery が残りの処理を行います。

例：

(function($){
    var fakeAsync = {};
    function fakeAsyncFunction( ) {
        alert(1);
        $(fakeAsync).trigger('customDone');
    }

    function a( ) {
        alert(2);
    }
    function b( ) {
        alert(3);
    }
    function c( ) {
        alert(4);
    }

    window.setTimeout(fakeAsyncFunction, 1000);

    $(fakeAsync).on('customDone', a)
        .on('customDone', b)
        .on('customDone', c);
})(jQuery);

働くフィドル。

于 2013-05-19T00:02:20.473 に答える