1

onStepChangingjQuery プラグイン「jQuery-Steps」のイベントで deferred を使用すると、deferred が完了するのを待つのに問題があります。このプラグインはhttp://www.jquery-steps.com/で文書化されています。ステップは、据え置きを待つのではなく、すぐに戻ります。私の実際のコードでは、ajax 呼び出しを行っており、次のステップに進む前に結果を待ちたいと考えています。

サンプルコードは次のとおりです。

$(document).ready(function() {
    var form = $("#form1");
    form.children("div").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        onStepChanging: function(event, currentIndex, newIndex) {
            $.when(asyncEvent()).then(function(status) {
                return status;
            });
        }
    });
});

function asyncEvent() {
    var dfd = new $.Deferred();

    setTimeout(function() {
        dfd.resolve(true);
    }, 2000);

    return dfd.promise();
}

どんな助けでも大歓迎です！

4

2 に答える 2

2

あなたのコードは、非同期関数が同期的に戻ることを期待していますが、これは機能しません。プロミスが完了するまでステップの変更を無効にする代替アプローチを次に示します。

$(document).ready(function() {
    var form = $("#form1");
    // initialize the return value as false (since you want to wait for your promise to complete)
    var stepReady = false;
    form.children("div").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        onStepChanging: function(event, currentIndex, newIndex) {
            $.when(asyncEvent()).then(function(status) {
                stepReady = status;
            });
            return stepReady;
        }
    });
});

function asyncEvent() {
    var dfd = new $.Deferred();

    setTimeout(function() {
        dfd.resolve(true);
    }, 2000);

    return dfd.promise();
}

の目的は状態を操作することであるため、このインスタンスdoneでは、返された promise で直接使用する方がよいでしょう。thenしたがって、次のように変更されます。

onStepChanging: function(event, currentIndex, newIndex) {
    asyncEvent().done(function(status) {
        stepReady = status;
    });
    return stepReady;
}
于 2015-01-17T00:39:27.453 に答える
0

$.whenは非同期で実行され、スクリプトでは onStepChanging ではなく $.when コールバックのステータスが返されるため、遅延を待たずにステップがすぐに実行されます。

私の提案は、デフォルトでonStepChangingイベントをfalse に戻し、手動でステップ変更を行う必要がある..

このようなものかもしれません

onStepChanging: function(event, currentIndex, newIndex) {
    $.when(asyncEvent()).then(function(status) {
        if(status)
        {
            if (currentIndex < newIndex)
            {
                form.children("div").steps('next');
            }
            else
            {
                form.children("div").steps('previous');
            }
        }
    });

    return false;
}

間違いを書いたら申し訳ありません。このコードを十分にテストしていません。http://www.jquery-steps.com/Examplesの例を読んで、それがどのように機能するかを理解しようとしていますが、主なアイデアは false を返すことですデフォルトでは手動でステップ変更を行います..それが役立つことを願っています..

于 2015-01-17T00:37:30.807 に答える