title: Javascript callback in each when all done
body: <p>First of all, you should know I have nested <code>$.ajax</code> calls. The first one prints the <code>table</code> and when it's complete I am doing the second <code>$.ajax</code> for <code>each</code> <code>&lt;tr&gt;</code> in the table. Both use <code>async: true</code>. </p>
  
  <p>I'm doing this because I want to give a view (the table) to the final user and then 3 <code>&lt;td&gt;</code> have to load data from other URL. After this explanation:</p>
  
  <pre class="lang-js prettyprint-override"><code>$.ajax({
    // ...
    complete: function() {
      $('table tbody tr.product').each(function(i) {
        let line = $(this);
        ...
        // set variable
        const data = { ...
        };
        // data values are from prev varaibles
        $.ajax({
          type: 'POST',
          url: URIPOS,
          data: data,
          async: true,
          beforeSend: function() {
            tdMostSales.html('&lt;i class="fa fa-spinner fa-spin fa-1x"&gt;&lt;/i&gt;');
            tdSubscriptions.html('&lt;i class="fa fa-spinner fa-spin fa-1x"&gt;&lt;/i&gt;');
            tdGeneral.html('&lt;i class="fa fa-spinner fa-spin fa-1x"&gt;&lt;/i&gt;');
          },
          success: function(res) {
            const resp = JSON.parse(res);
            const {
              general,
              prevision
            } = resp;
            const {
              total,
              notified
            } = resp.subscription;
            tdMostSales.attr('data-value', prevision)
            tdMostSales.html(`${prevision}`);
            tdSubscriptions.html(`${notified}/${total}`);
            tdGeneral.html(`${general}`);
          },
          complete: function() {
            tdMostSales.blur();
          }
        });
  
        if (i + 1 === $('table tbody tr.product').length) {
          console.log('finished')
          var options = {
            valueNames: [
              'name',
              'sku',
              'brand',
              'match',
              'profit',
              'profit-rating',
              'sell-rating',
              {
                name: 'pvp',
                attr: 'data-value'
              },
              {
                name: 'demand-forecast',
                attr: 'data-value'
              }
            ],
            listClass: 'product-list-body'
            //pagination : true,
            //page: 20
          };
          var orderedList = new List('generator', options);
          return;
        }
      });
    }
  });
  </code></pre>
  
  <p>but with this, it return the <code>console.log('finished')</code> when the <code>$.ajax</code> haven't finished yet, still working on some <code>&lt;tr&gt;</code>, so how can handle this? Maybe a callback when each finish but Where to do this or how?</p>
  
  <p>I don't think this is a duplicate post... because I don't want to make differents <code>ajax</code> and then get a <code>response</code> I need to make one request and once it finish, make the next one, this second have to iterate each tr and make a request for each one but async and once it is finished (no need to make more request) <code>return</code> a response after all <code>tr</code> were iterate by the <code>ajax</code>.</p>