Question

我有一个数组，我需要循环并发送一个ajax调用。但是我希望它能够连续发生（在上一次成功完成之后再做下一次）。我该如何有效地做到这一点？

$($('.logitem').get()).each(function(i,item) {
      $.ajax({
        type: "POST",
        url: 'http://localhost/save.php',
        data: {myData: $(item).html()}
      });
});

Answer 1

好吧，我不知道这个解决方案的效率如何，但它确实可以从我的测试中发挥作用。

主要思想是使用生成器迭代您的项目列表。您可以使用.next()启动一次迭代器，并且还可以从ajax请求的完整.next()中调用callback。

＆＃13;

$(document).ready(function() {

    function request(item) {
        $.ajax({
            type: "POST",
            url: 'http://httpbin.org/post',
            data: { myData: $(item).html() },
            complete: function() {
                //Simulate delay in the call, remove the setTimeout in your code
                setTimeout(function() {
                    //Once this call completes, call the next one
                    console.log('Call completed for item : ' + $(item).text());
                    iterator.next();
                }, 1000);
            }
        });
    }

    function* ajaxGenerator(items) {
        for (let i = 0; i < items.length; i++) {
            yield request(items[i]);
        }
    }

    var logItems = $('.logitem').get();
    var iterator = ajaxGenerator(logItems);

    //Get things started
    iterator.next();

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Test</title>

</head>

<body>

    <div class="logitem">Item1</div>
    <div class="logitem">Item2</div>
    <div class="logitem">Item3</div>

</body>
</html>

＆＃13;

jQuery承诺迭代

1 个答案: