按订单运行ajax请求

Question

How can I send ajax in a for loop by order? Here is my code:

function ajax_sent(i, btn){
    jQuery.ajax({
       url  : ln_ajax_handle.ajax_url,
       type : 'post',
       data : {
            action    : 'ln_ajax_handle',
            main_data : i
        },
        success : function(result){
            jQuery('#ln-modal-bangchinh').append(result);
            if(i === 5){
                btn.button('reset');
                jQuery('#ln-content-modal').modal('show');
            }
        }
   });
}

jQuery(document).ready(function(){
    jQuery('.ln-update').click(function(){
        var btn = jQuery(this);
        btn.button('loading');

        for(var i = 1; i <= 5; ++i){
            ajax_sent(i, btn);
        }
    });
});

And here is simple php test function:

function ln_ajax_handle(){
    $data = $_POST['main_data'];

    echo ln_alert_test($data);

    wp_die();
}

function ln_alert_test($data){
    ob_start();
    ?>
    <div class="alert">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <strong>Success!</strong> The loop run by <?php echo $data; ?> times;
    </div>
    <?php    return ob_get_clean();
}

In php file, I use echo to get simple test. But the results are numbers is not sort by order, like as image. . I want when i = 1, and I get responsed from server, i = 2 will be execute. and next progress is same. Any way to do this?

Answer 1

You need to chain the ajax requests in such a way every other request starts after the previous one finishes.

var i = 1,
  fn = function() {
    i <= 5 && ajax_sent(++i, btn, fn);
  };

ajax_sent(i, btn, fn);

 // add a callback cb to be called on success
function ajax_sent(i, btn, cb) {
  jQuery.ajax({
    url: ln_ajax_handle.ajax_url,
    type: 'post',
    data: {
      action: 'ln_ajax_handle',
      main_data: i
    },
    success: function(result) {
      // if a callback was provided call it
      cb && cb();
      jQuery('#ln-modal-bangchinh').append(result);
      if (i === 5) {
        btn.button('reset');
        jQuery('#ln-content-modal').modal('show');
      }
    }
  });
}