Question

我在滑块内有一个表单，滑块每个部分内的元素由switch语句中各自的case控制。例如：

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()，但是我也必须在每个开关案例结束时调用它。流程应该类似于：

用户点击“下一步”..

- ＆GT;脚本检查用户所在的幻灯片

- ＆GT;为幻灯片做逻辑

- ＆GT; slide()

Answer 1

$.ajax会返回一个承诺，因此您可以回复承诺所引发的done事件：

$(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();
        }
    });
});

Answer 2

你可以使用它。

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;
        }
});

Answer 3

Ajax异步正确..所以当响应结束时，Slide（）函数已经被调用

而不是在函数末尾调用slide（），为什么不在ajax本身的成功中调用函数。

此外，您还没有正确关闭ajax方法..

$.ajax({
      type: "POST",
      url: "http://some.site.com/register.php",
      data: 'some data',
      success: function (response) {
          if (response)
            slide();
          }
});

Answer 4

是的，您可以将通话移动到成功回调中。然后它只会被称为成功。

Answer 5

从底部删除幻灯片并将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调用完成之前不要让案例中断。

Answer 6

我只需在click函数中添加一个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();
});

Answer 7

另一个堆栈溢出帖子：

How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

您可以同步执行ajax调用。我通常不推荐它，但这是一个可能的解决方案......

暂停switch语句直到AJAX成功

7 个答案: