Async ajax calls with counters

by Sascha

HTML

<input type="number" id="numEntries" value="10">
<input type="button" id="execute" value="Start">
<div id="result">

</div>

JavaScript

$('#execute').on('click', function() {
  $('#result').html('');

  var counters = {
    finished: 0,
    total: $('#numEntries').val(),
    success: 0,
    failed: 0
  }

  for (kk = 0; kk < $('#numEntries').val(); kk++) {
    $.ajax({
      type: "POST",
      url: "/echo/json",
      data: {
        style: kk,
        json: '{"status": "success"}',
        delay: Math.random(0, 15)
      },
      context: {
        "kk": kk,
        counters: counters
      },
      success: function(results) {
        this.counters.success++;
      },
      error: function(error) {
        this.counters.failed++;

      },
      complete: function() {
        this.counters.finished++;
        $('#result').append('Call #', this.kk, ' completed: ', this.counters.success, ' successful, ', this.counters.failed,
          ' failed of total ', this.counters.total, '<br />');
      }
    });
  }
});