1

スライダー内にフォームがあり、スライダーの各セクション内の要素は、switch ステートメントのそれぞれのケースによって制御されます。例えば：

HTML

<ul class="slider">
    <li class="slide">
        <span class="next">Next</span>
    </li>
    <li class="slide">
        <span class="next">Next</span>
    </li>
    <li class="slide">
        <span class="next">Next</span>
    </li>
</ul>

JS

$(function(){
    $('.next','.slide').click(function (e) {
        e.preventDefault();

        var slideIndex = $(this).closest('.slide').index();

        switch (slideIndex) {
            case 0:
                someFunction();
                break;
            case 1:
                anotherFunction();
                break;
            case 2:
                $.ajax({
                    type: "POST",
                    url: "http://some.site.com/register.php",
                    data: 'some data',
                    success: function (response) {
                        if (response)
                            // Call slide();
                    }
                });
                break;
            default:
                return false;
                break;
        }
    slide();
});

問題は、slide()常にクリック関数の最後に呼び出されることです。そのAJAXリクエストが応答を返した後にのみ関数を呼び出す方法はありますか?

編集

私はおそらく自分自身を十分に明確にしていませんでした。私は ajax 応答を呼び出すことができることを知っていますslide()が、すべての switch ケースの最後にも呼び出す必要があります。フローは次のようになります。

ユーザーは「次へ」をクリックします。

-> スクリプトは、ユーザーがどのスライドにいるかをチェックします

-> そのスライドのロジックを実行します

->slide()

4

7 に答える 7

2

$.ajaxdonepromise を返すので、promise が発生するイベントに応答できます。

$(function(){
    $('.next').click(function (e) {
        var ajaxPromise;
        e.preventDefault();

        var slideIndex = $(this).attr("id");

        switch (slideIndex) {
            case 0:
                someFunction();
                break;
            case 1:
                anotherFunction();
                break;
            case 2:
                ajaxPromise = $.ajax({
                    type: "POST",
                    url: "http://some.site.com/register.php",
                    data: 'some data'
                });
                break;
            default:
                return false;
        }

        if (ajaxPromise) {
            // execute when the promise is finished
            ajaxPromise.done(slide);
        } else {
            // execute immediately
            slide();
        }
    });
});
于 2012-09-19T17:26:39.337 に答える
1

あなたはそれを使用することができます。

HTML

<ul class="slider">
    <li class="slide">
        <span id="0" class="next">Next</span>
    </li>
    <li class="slide">
        <span id="1" class="next">Next</span>
    </li>
    <li class="slide">
        <span id="2" class="next">Next</span>
    </li>
</ul>

JS

$(function(){
    $('.next').click(function (e) {
        e.preventDefault();

        var slideIndex = $(this).attr("id");

        switch (slideIndex) {
            case 0:
                someFunction();
                break;
            case 1:
                anotherFunction();
                break;
            case 2:
                $.ajax({
                    type: "POST",
                    url: "http://some.site.com/register.php",
                    data: 'some data',
                    success: function (response) {
                        if (response)
                            slide();
                    }
                break;
            default:
                return false;
                break;
        }
});
于 2012-09-19T17:22:54.497 に答える
0

一番下からスライドを削除し、AJAX 呼び出しを次のように変更します。

$.ajax({
    type: "POST",
    url: "http://some.site.com/register.php",
    data: 'some data',
    success: function (response) {
        if (response)
            slide();
    },
    complete: function(){
        break;
    },
    error: function(xhr, textStatus, errorThrown) {
        alert(errorThrown);//always do it, you never know when the AJAX call throws error
    }
});

基本的に、AJAX 呼び出しが完了する前に大文字と小文字を区別しないでください。

于 2012-09-19T17:33:19.027 に答える
0

Ajax は非同期です。そのため、応答が出力されるまでに、Slide() 関数は既に呼び出されています。

関数の最後で slide() を呼び出す代わりに、ajax 自体の成功で関数を呼び出さないでください。

また、あなたは ajax メソッドを適切に閉じていません..

$.ajax({
      type: "POST",
      url: "http://some.site.com/register.php",
      data: 'some data',
      success: function (response) {
          if (response)
            slide();
          }
});
于 2012-09-19T17:13:25.500 に答える
0

はい、スライドへの呼び出しを成功のコールバックに移動できます。その後、成功した場合にのみ呼び出されます。

于 2012-09-19T17:14:45.183 に答える
0

クリック関数に var callSlide を追加して true に設定し、callSlide が true の場合にのみ最後に slide() を呼び出します。ケース 2 でのみ false に設定します。

$(function(){
 $('.next','.slide').click(function (e) {
    var callSlide = true;

    e.preventDefault();

    var slideIndex = $(this).closest('.slide').index();

    switch (slideIndex) {
        case 0:
            someFunction();
            break;
        case 1:
            anotherFunction();
            break;
        case 2:
            $.ajax({
                type: "POST",
                url: "http://some.site.com/register.php",
                data: 'some data',
                success: function (response) {
                    if (response)
                        slide();
                }
            });
            callSlide = false;
            break;
        default:
            return false;
            break;
    }

   if(callSlide)
     slide();
});
于 2012-09-19T19:45:28.583 に答える
-1

別のスタック オーバーフローの投稿によると:

jQuery で非同期ではなく同期の Ajax リクエストを実行するにはどうすればよいですか?

ajax 呼び出しを同期的に実行できます。通常はお勧めしませんが、可能な解決策です...

于 2012-09-19T17:14:48.053 に答える