0

I have one ajax call in a loop as shown below.

reloadSetupAndRecurringAvailable = function( objDiscountRow ) {

    var intProductId = objDiscountRow.find('.product-id').val();
    var strUrl = '/?module=contract_setup_products-new&action=get_setup_and_recurring_available';

    $.ajax( {
    url: strUrl,
    data: { 'product_id': intProductId },
    success: function( response ) {
        fltSetupAvailable       = parseFloat( response.data.fltSetupAvailable );
        fltRecurringAvailable   = parseFloat( response.data.fltRecurringAvailable );

        objDiscountRow.find('.setup-available').text( fltSetupAvailable + '%' );
        objDiscountRow.find('.recurring-available').text( fltRecurringAvailable + '%' );
    }
} );

reloadDiscountProducts = function() {

    $('.discount-row').each( function() {
        reloadSetupAndRecurringAvailable( $(this) );
    } );
}

reloadDiscountProducts();

When the code executes, in the network tab the last ajax call shows successful and all the previous calls show in canceled status. ajax in loop

As per my findings it is due to asynchronization. The ajax request can take any time. How can I fix the code so that all the requests will be in completed status?

Liam
  • 27,717
  • 28
  • 128
  • 190
aagjalpankaj
  • 1,160
  • 1
  • 15
  • 25
  • Does this answer your question? [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) – Liam Feb 11 '20 at 09:07
  • You aren't using async/await or promises here. So the tags were misleading – Liam Feb 11 '20 at 09:08
  • @Liam can you explain how: a) closures effect this question b) how closures would cause previous calls to cancel? – freedomn-m Feb 11 '20 at 09:16
  • How *else* are you calling `reloadDiscountProducts`? Is it from a button/link click? Is this relevant: https://stackoverflow.com/a/16585362/2181514 – freedomn-m Feb 11 '20 at 09:19
  • Closures affect this because `objDiscountRow` will mutate as the each changes. This is a classic mutation issue. Though the OP hasn't given anywhere near an [mcve] so `¯\_(ツ)_/¯` – Liam Feb 11 '20 at 09:26
  • I think I need to use [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) here – aagjalpankaj Feb 11 '20 at 09:26
  • I fail to see how promises are going to help here? – Liam Feb 11 '20 at 09:33
  • @Liam I stand corrected, it would not be cancelled by the server, it would be a 503 (or similar) – freedomn-m Feb 11 '20 at 09:34
  • @Liam - Using promise I will not call next iteration unless the current ajax call completes. If I do so I think the issue will be resolved. Checking how promises works... – aagjalpankaj Feb 11 '20 at 09:39
  • No, that's not what promises do. Promises do not block. I would seriously advise you to read the duplicate I tagged as I'm reasonably sure that's what you're getting at. – Liam Feb 11 '20 at 09:46
  • I'd also suggest you read up on [asynchronicity in general](https://stackoverflow.com/a/23667087/542251) – Liam Feb 11 '20 at 09:47

0 Answers0