在jquery中运行一个接一个的东西

时间:2011-05-26 05:16:53

标签: jquery ajax asynchronous synchronous

我正在开发的代码片段

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#Submit").click(function(){
        var Count = document.frmOne.count.value
        for (i=1;i<=Count;i++)
        {
            $.ajax({
                url:"process.php",
                type:"get",
                data:$("form").serialize(),
                success:function(response){
                    var obj = jQuery.parseJSON( response );
                    var success = obj.success;
                    var actionsNumber = obj.number;
                    $("#result").html('There have been  '+actionsNumber+'  loops completed');    


                }
            })
        }
                $.ajax({
                     url:"done.php",
                     type:"get",
                      })
        })
    })
</script>

基本上我需要让整个for循环完成,然后让它运行“done.php”。但目前似乎在for循环中大约2个循环之后运行done.php。

所以,让我们看看我是否可以更好地解释这一点。我有人点击提交按钮后运行整个js脚本。我有一个用户输入的次数运行process.php,然后我希望它在完成for循环后运行done.php。但它目前正在运行process.php大约两次,然后是done.php,然后继续process.php。

我该如何解决这个问题?

现在我已经尝试了这个并且它仍然没有工作,请帮助

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#Submit").click(function(){
        var Count = document.frmOne.count.value
        var b = 0
        for (i=1;i<=Count;i++)
        {
            $.ajax({
                url:"process.php",
                type:"get",
                data:$("form").serialize(),
                success:function(response){
                    var obj = jQuery.parseJSON( response );
                    var success = obj.success;
                    var actionsNumber = obj.number;
                    $("#result").html('There have been  '+actionsNumber+'  loops completed');   
                    b++;


                }

            })
    if(Count == b)
            {
                $.ajax({
                    url:"done.php",
                    type:"get",

                      })
                      var b = 0
            }
        }



        })
    })
</script>

3 个答案:

答案 0 :(得分:1)

简短回答 - 您需要在for循环内的ajax请求中设置选项async: false

更长的答案 - 您的成功功能打印出循环次数仅在请求返回给您时执行,在发送时。您的循环实际上在发送done.php请求之前完成,但您无法控制请求返回的顺序。您可以通过移动此行来验证这一点:
$("#result").html('There have been '+actionsNumber+' loops completed');
在循环中的ajax请求之前。

答案 1 :(得分:0)

保持另一个计数,在第一个ajax调用的成功回调中增加该计数(在循环内)。然后只有当该计数达到Count时才调用第二次ajax调用done.php。

$ .ajax是异步的,因此在你的代码中,它不会等到循环内的所有调用完成后再进行done.php调用。这就是AJAX的工作原理。

答案 2 :(得分:0)

在循环ajax请求成功回调中添加逻辑以检查它是否是最后一个ajax请求回调(如果是)。拨打done.php电话。

for(var i;i<=Count;i++)    
    $.ajax({
    ...
    ,success:function(data){
       if(Count == i)
       {
          $.ajax({
          ..
          url:"done.php",
          ..
          });
       }

    },
    ..
    });
}