关于ajax：如何在响应进入jquery之前停止循环？


How to stop the loop until the response get in jquery?

我有这样的代码。 循环长度大于100。

1
2
3
4
5
6
7
8
$('.check_box_ping:checked').each(function(i, obj) {
    $.post(
       "mass_ping.php",
       "ping",
        function(response) {
        }
    );
});

现在100 $.post()次呼叫同时发生。 我希望在从服务器获得前一个$.post()的响应后依次执行每个$.post()。

相关讨论

使用deferred object，您可以链接所有ajax调用，在一些链式pipe()方法中返回一个promise(请参阅下面的控制台输出)

标记和js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<body>
    <input type="checkbox" checked />
    <input type="checkbox" checked />
    <input type="checkbox" checked />
    <input type="checkbox" checked />  
</body>

<script src="http://code.jquery.com/jquery-1.8.3.min.js">

function doRequest() {
    return $.post("script.php").done(function(response) {
       console.log('Loaded in %d seconds', response);
    });
}

$(document).ready(function(){

    var dfd   = $.Deferred(),
        chain = dfd;

    $('input:checked').each(function() {
        chain = chain.pipe(function() {
            return doRequest().promise();
        });
    });

    chain.done(function() {
       console.log('done')
    });

    return dfd.resolve();
});

script.php的

1
2
3
4
5
6
<?php
   $seconds = rand(2, 5);
   sleep($seconds);
   header("Content-type: text/html");
   echo($seconds);
?>

Sleep()仅用于模拟响应的随机延迟。在javascript控制台上你应该看到这样的东西：

output

暂停每个循环的唯一方法是使帖子同步，这通常是一个非常糟糕的用户体验(它挂起浏览器)。

我建议的是你重构你的循环，这样你就可以完成上一篇文章的下一次迭代：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function() {

    var checked = $('.check_box_ping:checked');
    var index = 0;

    function next() {
        if (index < checked.length ) {
            var item = checked.eq(index++);
            // use item here for your post
            $.post({...}, function(response) {
                // do your normal handling of the response here
                ...
                // now kick off the next iteration of the loop
                next();
            });
        }
    }
    next();

})();

你可以做两件事

  • 更改您的代码，以便从第一篇文章的return函数中调用下一个post。这需要对当前循环进行一些更改，但会保持一切顺利运行
  • 更快，但更脏，是使帖子同步。您可以在这个问题中找到如何：如何使jquery"$ .post"请求同步。我建议不要这样做，因为它会在加载期间削弱你的页面。
    • 相关讨论