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 请求给出响应后调用该函数？

编辑

我可能还不够清楚。我知道我可以只调用slide()ajax 响应，但是我还必须在每个 switch 案例结束时调用它。流程应该类似于：

用户点击“下一步”..

-> 脚本检查用户在哪张幻灯片上

-> 为那张幻灯片做逻辑

->slide()

4

7 回答 7

2

$.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();
        }
    });
});
于 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 调用完成之前不要让 case 中断。

于 2012-09-19T17:33:19.027 回答
0

是的，您可以将调用移动到成功回调中。然后它只会在成功时被调用。

于 2012-09-19T17:14:45.183 回答
0

我只想在 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();
});
于 2012-09-19T19:45:28.583 回答
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 回答
-1

根据另一个堆栈溢出帖子：

如何让 jQuery 执行同步而不是异步的 Ajax 请求？

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

于 2012-09-19T17:14:48.053 回答