2

私は次のような3つの異なるjQuery関数を持っています：

function step1() {
  ...
}

function step2() {
  ...
}

function step3() {
  ...
}

そして私がそれらをこのように呼ぶならば：

step1();
step2();
step3();

それらはすべて同時に実行されます。どうすればそれらを1つずつ呼び出すことができるので、終了step2();後に呼び出され、終了後に呼び出されます。step1();step3();step2();

// より詳しい情報

Step1()はjsonを実行し、htmlに詳細を追加し、Step2()別のjsonを実行し、によって作成されたdivに情報を追加し、読み込み中のアニメーションを非表示にしますStep1()。Step3()

//機能

一部のユーザーからの要求に応じて、次の機能があります。

jQuery.noConflict();

jQuery(document).ready(function($) {

    var cardType = $.cookie('cardType');
    var categoryID = $.cookie('categoryID');

    function step1() {
        $.getJSON('http://domain.com/benefits/active/all.json', function(data) {
            $.each(data, function(i,item){
                if (item.benefit_type_id == categoryID) {
                    content = '<li><a class="showDetails" data-offer-description="' + item.description + '" data-offer-period="' + item.begin_date + ' - ' + item.end_date + '"><div class="company" title="' + item.business_id + '"></div><div class="shortdescription">' + item.name + '</div></a></li>';
                    $(content).appendTo("#thelist");
                }
            }); 
            step2();
        });
    } // function step1();

    function step2() {  
        $('.company').each(function(i, item) {
            var tempTitle = item.title;
            $.getJSON('http://domain.com/businesses/from_list/' + tempTitle + '.json', function(data2) {
                $.each(data2, function(i,item){
                    content = '<span>' + item.name + '</span>';
                    $(content).appendTo("div[title='" + tempTitle + "']");
                }); 
                step3();
            });
        });
    } // function step2();

    function step3() {
        loaded();
        $('#loading').delay(1000).fadeOut('slow', function() {
            // Animation complete.
        });
    } // function step3();

    step1();

});
4

2 に答える 2

5

各関数で何を実行しているのかわからないので、非同期呼び出しを実行するものはないと思います。つまり、ajaxリクエストなどです。

各関数で追加の非同期呼び出しが発生した場合、以下はそのままでは適用されません。

1つのオプションは、次のように一方を他方から呼び出すことです。

function step1() {
    //...
    step2();
}

function step2() {
    //...
    step3();
}

function step3() {
    //...
}

または、次のように、関数シグネチャでコールバックを使用できます。

//pass step2 function as parameter to step1
//pass step3 function as parameter to step2
step1(step2(step3));

function step1(callback) {
    //...
    callback();
}

function step2(callback) {
    //...
    callback();
}

function step3() {
    //...
}

または、次のように、jQuerydeferredを使用すると機能する場合があります。

$.when($.when(step1()).then(step2)).then(step3);

を使用した据え置きソリューションについては、100％確信が持てません.when()。

上記のコードは（DEMO）を使用しwhen()て機能しているようですが、コメントで述べられているように、延期されたpromiseFelixKingを返すようにメソッドを更新すると、次のことができます。

step1().then(step2).then(step3);

デモ-延期された約束を使用する

resolved()次のメソッドを実行するには、各遅延オブジェクトを実行する必要があります。これにより、たとえば、何かを実行できず、たとえば呼び出しが発生した場合
に実行したくないシナリオがある場合にも、ある程度の制御が可能になります。 step3()step2().reject()

フィドル内の遅延オブジェクトを試してみてください。詳細については、遅延プロミスのドキュメントも参照してください。

サンプル-DEMOのコード：

step1().then(step2).then(step3);

function step1() {
    var $dfStep1 = new $.Deferred();

    console.log("step1");

    $dfStep1.resolve();
    return $dfStep1.promise();
}

function step2() {
    var $dfStep2 = new $.Deferred();

    console.log("step2");

    $dfStep2.resolve();
    return $dfStep2.promise();
}

function step3() {
    var $dfStep3 = new $.Deferred();

    console.log("step3");

    $dfStep3.resolve();
    return $dfStep3.promise();
}
于 2013-01-21T00:06:04.867 に答える
0

関数内に非同期動作がない場合、それらは順番に呼び出されます。予想とは異なる時間にコンソールに出力が表示される場合があります。Firefoxなどのコンソールは出力をバッファリングし、場合によっては（あまり頻繁ではありませんが）誤解を招く可能性があると思います。

これらの関数内で非同期動作を行う場合は、同期させるか、function1へのコールバックでfunction2を呼び出し、function2へのコールバックでfunction3を呼び出す必要があります。これにより、function1が適切な状態に達したときにのみfunction2が呼び出されるようになります。

于 2013-01-21T00:05:28.870 に答える